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