Question

我正在进行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%;
    }
}

它是否有这样的行为并且有办法解决它？

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

Answer 1

将此添加到您的<head>：

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

➔Documentation

Answer 2

确保您拥有：

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

CSS媒体查询不起作用

2 个答案: