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 <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处的叶子节点，所以奇怪的是如何将其放入代码中。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS80RzE1aC5qcGcifQ==” alt =“在此处输入图像描述”>

Answer 3

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