1

レスポンシブ イメージ ウォールを作成しようとしています - CSS のみ。各画像は float:left li の背景 (background-size:cover) です。

ここに例: http://www.tourdumonde.fr/dev/tiles.php

私の目標は、画面の幅に応じて li の幅を調整できるようにすることです。

表示できるようにしたい：

IF ON ANY SMARTPHONE (縦向きと横向き) : 1 行あたり 2 li (float:left; width:50%; min-height:300px; )

ELSE (その他のデバイス) :

  • 画面幅が 481px 未満の場合、1 行あたり 2li
  • 画面幅が 600px 未満の場合、1 行あたり 3 li
  • 画面幅が 767px 未満の場合、1 行あたり 4 li
  • 画面幅が 1100px 未満の場合、1 行あたり 5 li

ここに私のメディアクエリがあります:

ul, ul li { margin:0; padding:0; list-style-type:none; }
ul { width:100%; }
li { float:left; overflow:hidden; background-size:100% auto; border:none;}

/* LAPTOP / DESKTOP RULES */
@media (max-width: 480px) {
li { width:100%; min-height:300px;}
}
@media (min-width: 481px) {
li { width:50%; min-height:175px;}
}
@media (min-width: 600px) {
li { width:33%; min-height:150px;}
}
@media (min-width: 767px) {
li { width:25%; min-height:150px;}
}
@media (min-width: 1100px) {
li { width:20%;min-height:150px; }
}

/* SMARTPHONES RULE */
@media (orientation: portrait) and (max-device-width: 360px), (orientation: landscape)     and (max-device-width: 640px) {
li { width:50%; min-height:310px;}
}

今のところ、サイズを変更して調整方法をテストすることにより、ラップトップ（IE、Firefox、Chrome）でテストしてテストしました。かなりうまくいくようです。

また、Samsung Galaxy S3 (Chrome) でもテストを行いましたが、行ごとに 2 つの lis が得られました。

しかし、メディアクエリのロジックは改善できると思います (これを使用するのはこれが初めてなので、不器用だと確信しています)。

=> これらのメディア クエリをより効率的にするにはどうすればよいですか? そこに欠点はありますか？スマートフォンのルールは十分に汎用性がありますか?

（今のところ、「バグ」に気付きました：スマートフォン（SGS3）の場合：ページを横向きモードでロードすると、行ごとに2が表示されますが、向きを変更すると、行ごとに4に自動サイズ変更されます。行ごとに 2 になるように更新します)

4

1 に答える 1

1

これを達成するための最良の方法 (および私が行ってきた方法)は、column-countを使用することだと思います。次に例を示します。

ul { line-height: 0; width:100%; margin:0 auto;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

li img { width:100% !important; height:auto !important; }

@media (max-width: 767px) { ul {   -moz-column-count:4; -webkit-column-count:4; column-count:4; } }
@media (max-width: 600px) { ul {   -moz-column-count:3; -webkit-column-count:3; column-count:3; } }
@media (max-width: 481px) { ul {   -moz-column-count:2; -webkit-column-count:2; column-count:2; } }

編集:横向きモードで列がオフになっている理由は、おそらくビューポート メタを含めるのを忘れたためです。 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

編集編集: 通常の body タグの代わりにこのコードを適用すると、バグが修正される可能性があります。

<body onload="resize()" onresize="resize()">
于 2013-06-10T08:00:39.320 に答える