html - 响应式 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 个使用 SDK 运行的 android 设备来测试它。一个是 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){ }

Answer 2

换成这个

*{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;}
}

这个

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

body{background:#fcfcfc;font-family:Arial,Verdana,sans-serif;font-size:100%;}


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

@media screen and (max-device-width:320px){
    body{background:red ;}
}

更多关于媒体查询-1

媒体查询-2