レスポンシブ イメージ ウォールを作成しようとしています - 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 になるように更新します)