gpt4 book ai didi

html - 我的@media 查询在移动设备上不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 17:56:29 25 4
gpt4 key购买 nike

如果浏览器宽度小于这五个图像(包括边距等),我试图允许每行包含五个图像的容器更改其宽度的大小。

我添加了以下媒体查询,并且在桌面计算机上浏览时一切正常(将浏览器的宽度调整为小于 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com