【问题标题】:choosing a responsive/fluid grid framework/template选择响应式/流体网格框架/模板
【发布时间】:2014-01-22 00:22:05
【问题描述】:

嘿,所以我一直在网上寻找一些流体网格和响应式网格框架的例子(我相信我正在寻找流体,但仍然不确定)。并且想知道这里是否有人可以帮助我指出一些可用代码的方向,因为我不完全确定如何用纯 css 实现(可能需要 javascript/jquery)无论如何这就是我正在寻找的:

大屏幕是这样的

屏幕小一点

屏幕更小

(在图像中,随着屏幕尺寸的减小,每个块看起来都会变大一点,这不是我真正想要的,每个屏幕都应该是相同的尺寸......如果你看过 netflixs 流派页面,这正是我正在寻找的)

我不需要完成抛光的代码示例,但我将如何去做(有 15 个媒体查询来处理网格和移动元素似乎不是答案或是吗?)任何关于我如何做到这一点的见解或正在实施的框架或演示将不胜感激。

【问题讨论】:

    标签: css gridview responsive-design fluid-layout


    【解决方案1】:

    我几乎看不出为此使用网格有什么意义。 它比帮助你更让你头疼。 因为大多数网格会尝试使元素响应并调整它们的大小,以便在更小的宽度上适合它们在同一行上。 而且由于您不希望图像调整大小,因此根本不要使用响应式网格...

    你可以选择一个普通的网格,但为什么要导入 1000 多行代码来完成可以在 1 行中完成的事情。

    几乎只有一行代码(如果写在一行上):

    ul li {
        display: inline-block;
        *display: inline;
        zoom:1;
        vertical-align: top;
        width: 50px;
        height: 50px;
        margin: 0 10px 10px 0;
        background-color: #000;
    }
    

    Demo

    【讨论】:

    • 这正是我想要的!非常感谢……绝对让整个问题复杂化了。谢谢!
    猜你喜欢
    • 2021-01-24
    • 1970-01-01
    • 2012-05-31
    • 1970-01-01
    • 2012-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-04
    相关资源
    最近更新 更多