响应式 CSS 不起作用

Question

这是我的 css，作为测试：

*{margin:0;padding:0;outline:0;border:0;}

body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
@media screen and (max-device-width:320px){
    body{background:red !important;}
}

@media screen and (max-device-width:800px){
    body{background:organge !important;}
}

我有 2 台 Android 设备正在使用 SDK 进行测试。一个是 3.2 英寸 HVGA Slider 320x480，第一条规则在此设备上选取并将正文背景设置为红色。第二台设备是 Nexus 7 800x1280，但这台设备忽略了这两个媒体规则；但是，如果我删除第一个媒体规则，它就会拾取它。为什么？？

Answer 1

您是否已将此链接放入您的 html 文件中：-

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

您可以使用-

@media only screen and (max-width:800px){ }

代替-

@media screen and (max-device-width:800px){ }