Question

我想出了一个使用媒体查询的响应式流畅缩略图网格的解决方案：

HTML

<div class="container>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  //...

</div>

CSS

@media only screen and (min-width: 251px) { .thumbnail img { width: 50%; } }
@media only screen and (min-width: 501px) { .thumbnail img { width: 33.3333333%; } }
@media only screen and (min-width: 751px) { .thumbnail img { width: 25%; } }
@media only screen and (min-width: 1001px) { .thumbnail img { width: 20% ; } }
@media only screen and (min-width: 1251px) { .thumbnail img { width: 16.6666666%; } }
//...

Sample

这种方法有问题吗？

我不想仅仅为此使用大量媒体查询，但对于没有排水沟的网格来说，它似乎是一个不错的解决方案，因为它基本上只使用广泛支持的媒体查询。

Answer 1

尝试使用flex布局而不需要编写太多媒体查询。看看css-tricks 你会有类似的东西：

.container {
 display: flex; 
}
.thumbnail {
 flex: 1;
}
.thumbnail > img {
 width: 100%;
 height: auto;
}

具有媒体查询的响应式和流畅的缩略图网格

1 个答案: