0

サイズの異なる写真のグリッドを使用して、Pixel Perfect Responsive ページを作成しようとしています。私は最善のアプローチが何であるか疑問に思っていました?? フローティングリストでこれを行いますか? リストにない浮動要素??

本当にわかりません。以下は、全幅 (1200px) と縮小幅 (768px) のレイアウトを示す 2 つの図です。コンテナーの幅を変更し、メディア クエリを使用して要素を削除する方法は理解していますが、他の方法で目的の外観を取得する方法がわかりません。列を使用しますか??

全幅 http://www.letsboogey.com/stackimages/1.jpg

768 幅 http://www.letsboogey.com/stackimages/2.jpg

4

3 に答える 3

2

1200pxデバイスの場合、li または div の3 つの列を作成し、最初の列に画像、つまり A、G、H を配置できます。中央の列の B & C ; E、F、D、I、および J は 3 列目/最後の列にあります。必要な css プロパティを使用し、グリッド レイアウトに従って画像を修正します。

768px デバイスの場合、 Top、Left、Right、Bottom などの CSS プロパティを使用して、画像を相対的または絶対的に配置することをお勧めします。HTML レイアウトを変更する必要がないためです。

ここで768pxレイアウトのデモを作成しました：

.wrapper {
  position: relative;
  width: 1200px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wrapper * {
  position: absolute;
  border: 2px solid #000;
}
.aaa {
  left: 0;
  top: 0;
  width: 598px;
  height: 700px;
}
.bbb {
  left: 600px;
  top: 0;
  width: 598px;
  height: 200px;
}
.ccc {
  left: 600px;
  top: 202px;
  width: 598px;
  height: 596px;
}
.ggg {
  left: 0;
  top: 702px;
  width: 298px;
  height: 96px;
}
.eee {
  left: 300px;
  top: 702px;
  width: 298px;
  height: 96px;
}
.ddd {
  left: 0px;
  top: 800px;
  width: 598px;
  height: 200px;
}
.iii {
  left: 600px;
  top: 800px;
  width: 298px;
  height: 200px;
}
.fff {
  left: 900px;
  top: 800px;
  width: 298px;
  height: 200px;
}
<ul class="wrapper">
  <li class="aaa">A</li>
  <li class="bbb">B</li>
  <li class="ccc">C</li>
  <li class="ggg">G</li>
  <li class="eee">E</li>
  <li class="ddd">D</li>
  <li class="iii">I</li>
  <li class="fff">F</li>
</ul>

于 2014-11-15T21:55:32.807 に答える
0

このジェネレーターを使用できます: https://www.entomic.com/responsivecss、レスポンシブ デザインに適した Web サイトです。

于 2014-11-15T20:09:25.253 に答える
0

これを調べることをお勧めします: http://susy.oddbird.net/

これは一種の「グリッド システム」であり、グリッドのスタイルに追加のマークアップをあまり追加せずに独自のグリッドを設計します。これらのクラスで行、グリッド、フロートなどを作成する必要はありません。

小さなプロジェクトで 1 回試してみましたが、正直なところ、Compass のような CSS オーサリング ツールを使用したときに得られるパワーと、異なる開発の考え方が気に入っています。

于 2014-11-15T20:49:17.950 に答える