如何根据范围内的窗口大小调整网格图块的大小答案

【问题标题】：how to resize grid tiles based on window size within a range如何根据范围内的窗口大小调整网格图块的大小
【发布时间】：2013-06-06 09:26:33
【问题描述】：

基本上，我正在尝试弄清楚如何在此页面上复制效果

https://music.twitter.com/i/chart/popular

当窗口调整大小时，javascript 用于调整网格图块的大小，在 200 到 240 像素之间调整，这取决于哪一个最能填满屏幕。

冒着重新发明轮子的风险，是否有一个 javascript / jquery 库已经这样做了？它与砖石/同位素的路线相同，但据我所知，它们不会调整元素的大小。

如果没有，我想我自己试试吧，理论上听起来并不太复杂......

【问题讨论】：

标签： javascript jquery css responsive-design

【解决方案1】：

所以我已经查看了该站点并突然想到了 - 我不知道有任何插件/库可以专门实现这种效果。使用 jQuery 实现这种效果是否有特别的好处或特定的要求？如果不是，我强烈推荐使用媒体查询的 css3 响应式设计方法。

check out this fiddle for a quick example 我只用少量的 html 和 css 就能做到的事情

.icon {
    background:#ccc;
    float:left;
}

.icon img {
    width:100%;
    height:auto;
}

@media screen and (min-width:960px)  {
    .icon{
        width:20%;
    }
}

@media screen and (min-width:768px) and (max-width:959px) {
    .icon{
        width:25%;
    }
}

@media screen and (min-width:480px) and (max-width:767px) {
    .icon{
        width:33.3%;
    }
}

@media screen and (max-width:479px) {
    .icon{
        width:50%;
    }
}

根据我对与您类似的问题的具体经验，媒体查询结果证明比在 javascript 中执行类似操作更轻量级，无论是资源使用强度还是工作量。

如果您不熟悉媒体查询 - THIS article on the mozilla developer network is a great starting point

【讨论】：

谢谢乔，我想我很难只见树木不见森林。我查看了媒体查询，但一分钱并没有下降，我可以对百分比宽度为 100/否的每个列数进行一次查询。的列。非常感谢！