我怎样才能使我的媒体查询更好？答案

【问题标题】：How could I make my media queries better?我怎样才能使我的媒体查询更好？
【发布时间】：2013-06-04 14:37:21
【问题描述】：

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

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

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

我希望能够显示：

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

ELSE（任何其他设备）：

如果屏幕宽度
如果屏幕宽度
如果屏幕宽度
如果屏幕宽度

这是我的媒体查询：

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 个列表。

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

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

（现在，我注意到一个“错误”：在智能手机 (SGS3) 上时：如果我以横向模式加载页面，我会得到每行 2 个 li。但如果我改变方向，它会自动调整为每行 4 个。我必须刷新才能再次使其每行 2 个）

【问题讨论】：

标签： responsive-design media-queries

【解决方案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()">

【讨论】：

您好，感谢您的贡献。只是为了让我进一步理解，为什么您认为这种方法比使用浮动 lis 更好？关于我的媒体查询，你有什么办法可以更好地“链接”它们吗？
使用列数，列表项会自动用百分比填充空白间距。不涉及计算。（在您的方法中，您需要重新计算每个媒体查询的百分比量。我只是设置了一个新的列数。）此外，正如您在示例中看到的那样，当我调整屏幕大小并达到三列时，中间行的图像被截断。
如果您希望保持一个具有隐藏溢出的静态块，这是可以的，但如果您希望充分显示其中的每个图像，则不是。您的方法很好，因为它可以完成工作。我的方法只是一种替代方法，它始终保持我的图像成比例。还;我想我已经为您的错误找到了解决方案。检查我的答案中的第二个编辑。
嘿，杰斐逊，有点延迟，谢谢您的解释，它非常清楚，对我帮助很大。