我试图允许一个容器,每行容纳五个图像,如果浏览器宽度小于五个图像,包括边距等,则改变其宽度的大小.
我添加了以下媒体查询,并且在桌面计算机上浏览时都很有效(将浏览器的大小调整为宽度小于1080px)...容器更改宽度,内容居中.
但是,在移动设备(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;
}
}
Jos*_*ier 13
这可能是因为您没有设置视口.
将以下元标记放在<head>文档的元素中.
<meta name="viewport" content="width=device-width, initial-scale=1">
有关更多信息,请阅读"使用视口元标记控制移动浏览器上的布局" - (mdn)
| 归档时间： |
|
| 查看次数： |
2304 次 |
| 最近记录： |