CSS 网格和响应式设计答案

【问题标题】：CSS Grids and Responsive DesignCSS 网格和响应式设计
【发布时间】：2011-11-03 21:55:57
【问题描述】：

我计划为网站使用网格系统，但我希望能够有选择地打破网格。例如，这意味着将OOCSS size1of2 转换为size1of1）。理想情况下，html 应该是这样的：

<div class="line">
    <div class="unit size1of2 respond-480">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="unit size1of2 respond-480 lastUnit">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

然后我会有类似下面的css：

@media screen and (max-device-width: 480px) {
    .respond-480 {
        /* something to linearize the box */
    }
}

有谁知道用 OOCSS 或其他网格系统来做到这一点的方法吗？我正在寻找这种级别的控制，而不是更简单的responsive grid。

【问题讨论】：

标签： css grid responsive-design oocss

【解决方案1】：

查看Cascade Framework。它具有 OOCSS 架构并支持开箱即用的响应式设计（尽管它是可选的，如果您愿意，可以省略）。

使用 Cascade 框架，您可以这样实现示例：

<div class="col">
    <div class="col size1of2">
        <div class="cell">
            <h3>1/2</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
    <div class="col sizefill">
        <div class="cell">
            <h3>1/2</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

因为她说要避免 !important，除非它是 Velocity conference 处的叶节点，所以她如何将它放在她的代码中很奇怪。

【讨论】：

【解决方案3】：

事实证明，将respond480 类添加到行而不是单元中更有意义。不奇怪。以下代码适用于现代浏览器。我使用子选择器来简化事情——尽管可以做一个变通方法，但旧版浏览器 (IE

@media screen and (max-width: 480px) {
    .respond480 > .unit {
        width: auto;
        float: none;
    }
}

我在挖掘 OOCSS 源代码时发现了grids/grids_iphone.css。这为我的策略提供了一些可信度。有人知道!important 是否是强制性的吗？没有它，选择性似乎对我有用——可能是由于两个类选择器。

@media screen and (max-width: 319px) {
    .unit {
        float: none !important;
        width: auto !important;
    }
}

这是page showing it in action。我使用了来自 Arnaud Gueras 的 Nicole Sullivan 的网格测试，但使用了更多填充文本。请注意，我故意将一个 2of2 片段保留为非线性化，以证明没有必要对所有内容进行线性化。

【讨论】：