1

我正在尝试创建一个响应式图像墙 - 仅限 CSS。每个图像都是 float:left li 的背景 (background-size:cover)。

这里的例子：http ://www.tourdumonde.fr/dev/tiles.php

我的目标是能够根据屏幕宽度调整 li 宽度。

我希望能够显示：

如果在任何智能手机上（纵向和横向）：每行 2 li（浮动：左；宽度：50%；最小高度：300 像素；）

ELSE（任何其他设备）：

  • 如果屏幕宽度 < 481px，每行 2 li
  • 如果屏幕宽度 < 600 像素，则每行 3 li
  • 如果屏幕宽度 < 767px，每行 4 li
  • 如果屏幕宽度 < 1100 像素，则每行 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）上尝试并测试了它，通过调整大小来测试它的调整方式：似乎工作得很好。

我还在我的三星 Galaxy S3 (Chrome) 上进行了测试，我确实得到了我的 2-per-row lis。

但我觉得我的媒体查询的逻辑可以改进（这是我第一次使用它们，所以我很确定它们很笨拙）。

=> 我怎样才能使这些媒体查询更有效率？你看到那里有什么缺点吗？智能手机的规则是否足够通用？

（现在，我注意到一个“错误”：在智能手机（SGS3）上时：如果我以横向模式加载页面，我会得到每行 2 个 li。但如果我改变方向，它会自动调整为每行 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 onload="resize()" onresize="resize()">
于 2013-06-10T08:00:39.320 回答