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必須かどうか誰か知っていますか？選択性は、それがなくてもうまくいくようです。おそらく2つのクラスセレクターが原因です。

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

そして、これが実際の動作を示すページです。ArnaudGuerasのNicoleSullivanのグリッドテストを使用しましたが、より多くのフィラーテキストを使用しました。すべてを線形化する必要がないことを示すために、1つの2of2セグメントを意図的に線形化しないままにしたことに注意してください。

于 2011-08-25T18:07:54.973 に答える
0

彼女はVelocity カンファレンス!importantでリーフ ノードでない限り避けるように言ったので、それをコードにどのように組み込むかは奇妙です。

ここに画像の説明を入力

于 2012-05-02T07:08:49.017 に答える
0

Cascade Frameworkを確認してください。OOCSS アーキテクチャを備えており、すぐに使用できるレスポンシブ デザインをサポートしています (ただし、これはオプションであり、必要に応じて省略できます)。

カスケード フレームワークでは、次のように例を実装します。

<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 に答える