-2

我正在使用 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 上进行测试，如果这有什么不同的话。

4

1 回答 1

3

好吧，规则中的max-width: 35.75emin覆盖了媒体查询中的规则。因为它来晚了。这就是级联的工作方式。.content

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

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

于 2013-07-22T04:12:43.960 回答