Question

我正在尝试创建一个响应式图像墙 - 仅限CSS。每个图像是浮动的背景（背景大小：封面）：左边的li。

此处示例：http://www.tourdumonde.fr/dev/tiles.php

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

我希望能够显示：

如果在任何智能手机上（人像和风景）：每排2立（浮球：左;宽：50％;最小高度：300px;）

ELSE（任何其他设备）：

每行2 li。 481px
如果屏幕宽度<1，则每行3 li。 600px的
每行4 li。 767px
每行5 li。 1100px

以下是我的媒体查询：

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次。

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

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

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

Answer 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">

编辑编辑：可以通过应用此代码而不是resumeir body标记修复错误。

<body onload="resize()" onresize="resize()">

如何让我的媒体查询更好？

1 个答案: