响应式 CSS 不工作答案

【问题标题】：Responsive CSS Not Working响应式 CSS 不工作
【发布时间】：2013-03-19 23:50:24
【问题描述】：

这是我的 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，但是这个忽略了两个媒体规则；但是，如果我删除了第一个媒体规则，那么它会拾取它。为什么？？

【问题讨论】：

大概“橙色”在您的实时规则中拼写正确？作为无效值，布局引擎将忽略此值。 Rohit 已更正拼写。除了多个媒体查询规则匹配并且同一选择器具有重复属性的情况外，我认为该顺序没有任何意义，在这种情况下，将应用最后一个媒体查询的值。
可能还值得一提的是，您选择的浏览器的开发人员工具对于解决这些“为什么这不起作用”问题以及“玩弄”价值观非常宝贵无需重复保存 CSS 并刷新站点。如果你使用谷歌浏览器作为你的主要浏览器，那么codeschool.com/courses/discover-devtools 有一个很好的关于使用开发工具的免费课程。无论您使用哪种浏览器，学习开发者工具的时间都是值得的。

标签： html css xhtml

【解决方案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){ }

【讨论】：

【解决方案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

【讨论】：

效果很好。你所做的只是把大的放在第一位？