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

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;
}