CSS网格和响应式设计

Question

我打算为网站使用网格系统，但我希望能够有选择地打破网格。这意味着，例如，将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。

Answer 1

事实证明，将respond480类添加到行而不是单元更有意义。不奇怪。以下代码适用于现代浏览器。我使用子选择器来简化操作 - 尽管可能有一种解决方法，但旧的浏览器（IE＆lt; 6）仍然不支持这些媒体查询。

@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段保留为非线性化，以证明线性化所有内容并非必要。

Answer 2

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

Answer 3

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

使用Cascade Framework，您可以像这样实现您的示例：

<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>