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

我有两个使用SDK运行的Android设备来测试它。一个是3.2英寸HVGA滑块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 ;}
}

有关 media query-1

的更多信息

<强> Media query-2

响应式CSS不起作用

2 个答案: