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

how to resize grid tiles based on window size within a range

本文关键字：网格 调整 窗口大小 何根 范围内      更新时间：2023-09-26

基本上，我想弄清楚如何复制这个页面的效果

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

当窗口被调整大小时，javascript被用来调整网格块的大小，从200到240px之间，基于哪一个最能填充屏幕。

冒着重新发明轮子的风险，是否有一个javascript/jquery库已经做到了这一点?这和砖石/同位素是一样的，但据我所知，它们不会改变元素的大小。

如果没有，我想我就自己试一试，理论上听起来不太复杂…

所以我看了一下这个网站，在我的脑海里——我不知道有任何插件/库能够实现这种效果。使用jQuery实现这种效果有什么特别的好处或特殊的要求吗?如果没有，我强烈推荐使用媒体查询的css3响应式设计方法。

查看这个快速示例，我可以用少量的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中执行类似的操作更轻量级，这既涉及资源使用的强度，也涉及工作量。

如果您不熟悉媒体查询- 这篇关于mozilla开发人员网络的文章是一个很好的起点

相关文章：