2

我计划为站点使用网格系统，但我希望能够有选择地打破网格。例如，这意味着将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 或其他网格系统来做到这一点的方法？我正在寻找这种级别的控制，而不是更简单的响应式网格。

4

3 回答 3

3

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

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

于 2011-08-25T18:07:54.973 回答
0

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

在此处输入图像描述

于 2012-05-02T07:08:49.017 回答
0

查看级联框架。它具有 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>
于 2013-03-25T21:22:40.903 回答