如果浏览器宽度小于这五个图像(包括边距等)，我试图允许每行包含五个图像的容器更改其宽度的大小。
我添加了以下媒体查询，并且在桌面计算机上浏览时一切正常(将浏览器的宽度调整为小于 1080 像素)...容器更改宽度并且内容居中。
但是，在移动设备(iPhone 4 和 S4)上浏览时它不起作用。想法？
CSS
.main-width {
margin: 20px auto;
max-width: 1080px;
min-width: 960px;
}
@media screen and (max-width: 1080px) {
.main-width {
max-width: 870px !important;
min-width: 870px !important;
}
}
最佳答案
这可能是因为您没有设置视口(viewport)。
将以下元标记放在 <head> 中文档的元素。
<meta name="viewport" content="width=device-width, initial-scale=1">
有关详细信息，请阅读 "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
关于html - 我的@media 查询在移动设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26206910/