【问题标题】: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/否的每个列数进行一次查询。的列。非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-08-07
    • 1970-01-01
    • 1970-01-01
    • 2019-05-28
    • 2021-12-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多