Question

我正在使用CSS媒体查询进行响应式网页设计。为了使它们井井有条，易于访问，我在CSS文档的顶部声明了所有媒体查询，如下所示：

* {margin:0 auto; padding: 0;}
body {margin: 0; padding: 0; font: normal 100% Helvetica, Arial, sans-serif; color: #FFF; background: url(../img/defaultNav.jpg); background-repeat: repeat-x;}
h1 {font-size: 5.75em; font-weight: 800; text-align: center}
h2 {font-size: 2.5em; font-weight: 300; text-align: center; line-height: 50px;}
h3 {font-size: 2.5em; font-weight: 100; line-height:50px; color: #666;}
h4 {font-size: 1.25em; font-weight: 100; color: #999; margin-top: 10px; margin-bottom:18px;}
p {font-size: 1em; color: #999;}
a {color: #999; text-decoration: none;}
a:hover {text-decoration: underline;}

@media screen and (min-width: 1700px) { 
                                        h1 {font-size: 6.2em;}
                                        h2 h3 {font-size: 3.5em;}
                                        h4 {font-size: 2.5em;}
                                        p {font-size: 2em;}
                                        /*.content {max-width: 80em;}*/
                                      }
@media screen and (max-width: 780px) {  /*.column {float: none; width: auto;}*/ }
@media screen and (min-width: 681px) {  .mobileBar, .nav {display: none;}   }
@media screen and (max-width: 680px) {  .header .title h1 {font-size: 2.5em;}   h2 {font-size: 1.5em;}  .headerSmall .title h1 {font-size: 2.5em;}  }
@media screen and (max-width: 500px) {  p {text-align: left;}   }
@media screen and (max-width: 320px) {
                                        * {text-align: left;}
                                        h1 { font-size: 2.5em;}
                                        h2 {font-size: 1.2em;}
                                        h3 {font-size: 1.6em; line-height: normal; text-align: center;}
                                        h4 {font-size: 1.4em; text-align: center;}
                                        .content .contentTitles img {display: none;}
                                     }

查询工作得很好，除了我上面评论的两个。（在前两个查询下）这两个查询只有在我试图影响的类下编写它们才有效，即：

.content {
margin:auto;
padding:1em 2em;
max-width:35.75em;
height:inherit;
}
@media screen and (min-width: 1700px) {    .content {max-width: 80em;}    }

我不明白为什么会这样做。我已经尝试过在堆栈上进行研究，只是一般的谷歌搜索，但我找不到任何结果。这真是令人沮丧，因为我喜欢保持我的代码组织。如果有人知道为什么会这样，我会很感激帮助。我也在测试最新版本的Safari和Firefox以及Safari iOS，如果这有所不同的话。

Answer 1

嗯，max-width: 35.75em规则中的.content 覆盖来自媒体查询的规则。因为它来得晚。这就是级联的工作原理。

如何对媒体查询规则进行分组和排序完全取决于您，但它们不会比以后的规则获得某种特殊优先级，并且可以像任何其他CSS规则一样被覆盖。

您的浏览器样式检查器将准确显示正在应用和/或覆盖的样式。你知道怎么用吗？

CSS3 Media Query不影响类宽度

1 个答案: