html - 使用 @media only screen 和 (max-width) 在 css 中更改 div 的宽度和高度的问题

Question

我正在开发一个网页，并试图使其适合移动设备或在其他屏幕尺寸上工作。我打算使用 css (@media only screen and (max-width:)) 来更改包含四个圆形缩略图形式的 div 的宽度和高度。

HTML：

<div class="thumbnail">
   <img src="#" class="cover1">
   <img src="#" class="cover2">
   <img src="#" class="cover3">
   <img src="#" class="cover4">
</div>

CSS：

.thumbnail{
    width: 200px;
    height: 200px;
    margin: 20px;
    float: left;
    display: flex;
    flex-wrap: wrap;
    border: 5px solid black;
    border-radius: 50%;
}
.thumbnail img{
    width: 100px;
    height: 100px;
}
.
.
.

@media only screen and (max-width: 1180){
    .thumbnail{ <-- does not work
        width: 150;
        height: 150;
    }
    .thumbnail img{ <-- works
        width: 75px;
        height: 75px;
    }
}

标签： htmlcss

Answer 1

将单位 px 添加到(max-width:1180).thumbnail 宽度和高度值。

.thumbnail {
  width: 200px;
  height: 200px;
  margin: 20px;
  float: left;
  display: flex;
  flex-wrap: wrap;
  border: 5px solid black;
  border-radius: 50%;
}

.thumbnail img {
  width: 100px;
  height: 100px;
}

@media only screen and (max-width: 1180px) {
  .thumbnail {
    width: 150px;
    height: 150px;
  }
  .thumbnail img {
    width: 75px;
    height: 75px;
  }
}

<div class="thumbnail">
  <img src="#" class="cover1">
  <img src="#" class="cover2">
  <img src="#" class="cover3">
  <img src="#" class="cover4">
</div>

.