我有一个着陆页,其中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
。
我错过了什么吗?
答案 0 :(得分:0)
原始iphone屏幕宽度(以像素为单位)为768px,即使iphone 6s仍然可以缩放。因此设备比率x2意味着屏幕上的全宽度css元素是cbs像素的screenwidth / 2。
为什么我们这样做?因为这意味着X cm宽度的屏幕在css中总是Y像素宽度。
我不知道未来密度显示会增加会发生什么。对于8k屏幕使用1080px css是没有意义的。也许这个命名会从px变成像Android应用程序上的dp更通用的东西。
答案 1 :(得分:0)
我终于发现我必须在<head>
中添加它:
<meta name="viewport" content="width=device-width, initial-scale=1">
现在一切正常。