html - レスポンシブと組み合わせた 960gs のネストされたグリッド

Question

皆さん、今晩は、

960.gs のネストされたグリッドとレスポンシブ Web デザインの使用について質問がありました。現在、ネストされたグリッドとクラス Alpha と Omega を使用して、左 (アルファ) と右 (オメガ) の余白を 0 にリセットします。これは現在、ハードコーディングされています。私のグリッドの構造は次のとおりです。

 <div class="grid_8">
  <ul class="recentbox">

       <li class="grid_4 projectbox alpha">
            <a href="#">

            <div class="thumbnails">
               <img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
            </div> <! - End. Thumbnails ->
            </a>

            <div class="description">
                 <h3> <a href="#"> Title Project </a> </h3>
                 <p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
                 </p>
            </div> <! - End. Description ->

            <div class="tags">
                Tags: Photoshop, Illustrator, Graphic Design
            </div> <! - End. Tags ->
        </li> <! - End li.grid_4 projectbox ->



       <li class="grid_4 projectbox">
            <a href="#">

            <div class="thumbnails">
               <img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
            </div> <! - End. Thumbnails ->
            </a>

            <div class="description">
                 <h3> <a href="#"> Title Project </a> </h3>
                 <p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
                 </p>
            </div> <! - End. Description ->

            <div class="tags">
                Tags: Photoshop, Illustrator, Graphic Design
            </div> <! - End. Tags ->
        </li> <! - End li.grid_4 projectbox ->



       <li class="grid_4 projectbox omega">
            <a href="#">

            <div class="thumbnails">
               <img src="images/portfolio/thumbnails/thumbnail-5.png" alt="Thumbnail">
            </div> <! - End. Thumbnails ->
            </a>

            <div class="description">
                 <h3> <a href="#"> Title Project </a> </h3>
                 <p> Lorem ipsum dolor sit amet, elit consectetur adipiscing. Phasellus ante quis eros.
                 </p>
            </div> <! - End. Description ->

            <div class="tags">
                Tags: Photoshop, Illustrator, Graphic Design
            </div> <! - End. Tags ->
        </li> <! - End li.grid_4 projectbox ->

   </ul> <! - End ul ->

私のウェブサイトには 3 列のレイアウトがあります。今の問題は、ウェブサイトをレスポンシブにしたいということです。iPad の場合、3 列のみの代わりに設計します 2. コンテナーを適切な幅 (iPad の場合) にすると、最初の div の下部にある最後の div (追加のクラス オメガ) が立ち、この div が間違ったものになります財産。Fully Sighted クラスの alpha と omega はコードにハードコードされており、変更されていません。上記の例の中央の div は実際には omega クラスを取得する必要があり、最後の div (これは現在最初の条件にあります) を取得する必要があり、alpha クラスは取得する必要があります。

レスポンシブ メディア クエリを備えたサイトが欲しいのですが、私の質問は、アルファとオメガがグリッドに適応できるようにするにはどうすればよいか、またはクラスなしでこれを行うにはどうすればよいかということです。

ありがとうございます！

グリーツ、キャスパー B

PS: 申し訳ありませんが、私の英語は私の母国語ではありません。