Question

我有一个着陆页，其中css的结构如下：

body {
    background: white;
}

@media (min-width: 768px) {
    body {
        background: red;
    }
}

@media (max-width: 767px) {
    body {
        background: blue;
    }
}

在桌面Safari和iPhone上（在真实的iPhone 6S设备上测试），正文背景为红色。无论我尝试应用什么（设备比率x2等），我都无法在iPhone上设置背景blue。

我错过了什么吗？

Answer 1

原始iphone屏幕宽度（以像素为单位）为768px，即使iphone 6s仍然可以缩放。因此设备比率x2意味着屏幕上的全宽度css元素是cbs像素的screenwidth / 2。

为什么我们这样做？因为这意味着X cm宽度的屏幕在css中总是Y像素宽度。

我不知道未来密度显示会增加会发生什么。对于8k屏幕使用1080px css是没有意义的。也许这个命名会从px变成像Android应用程序上的dp更通用的东西。

Answer 2

我终于发现我必须在<head>中添加它：

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

现在一切正常。

iPhone需要最小宽度的媒体查询：768px

2 个答案: