gpt4 book ai didi

ios - CSS 媒体查询不工作

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

我正在完成一项 TAFE 任务,以创建一个完整的响应式设计网站,但我在响应式部分遇到了问题。对于移动设备(已测试 iPad、iPhone、iPod Touch),他们遵循的唯一查询是 screen and (max-width:1000px) 即使我的 iPad 的屏幕宽度为798 像素,我的 iPod Touch 宽度为 320 像素。

所以在我所有的媒体查询中,移动设备只排在前两个之后。

@media screen and (max-width: 1180px) {
body {
margin: 0 5%;
}
}

@media screen and (max-width: 1000px) {
body {
margin: 0;
}
}

@media screen and (max-width: 900px) {
body header h1 {
right: 1%;
}
}

@media screen and (max-width: 800px) {
body header h1 {
bottom: 22%;
}
}

@media screen and (max-width: 700px) {
body #content-wrap #right {
display: none;
}

body #content-wrap #left {
width: calc(100% - 2.54%);
}
}

@media screen and (max-width: 690px) {
body header {
/* background-position: 40% -100px; */
background-position: 40% -130px;
}
}

@media screen and (max-width: 520px) {
body header h1 {
font-size: 220%;
}
}

这种行为是否有原因,是否有解决方法?

编辑:桌面浏览器在调整大小时遵循所有这些规则。

最佳答案

将此添加到您的 <head> :

<meta name="viewport" content="width=device-width, initial-scale=1">

Documentation

关于ios - CSS 媒体查询不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24027727/

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