为什么CSS媒体查询不遵循继承和级联的常规约定？

Question

我的CSS3媒体查询有一些问题...

下面是我目前正在编写的一小段代码：

@media only screen 
and (max-width : 420px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

我从“移动优先”的角度出发，考虑到CSS在“级联”方面的正常行为，我希望第二个@media语句继承前一条语句的所有样式，同时覆盖它有匹配或“较重”选择器的任何样式。

(再加上CSS的优先顺序，这意味着任何匹配的样式定义都将使用最后定义的规则集，除非使用!important语句“胜过”它！)

据我所见，通过测试和一些Google / SE搜索，情况并非如此。

@media样式的规则是否可以继承自适用的早期语句，或者我是否必须重复每条语句所需的所有规则？(不是很DRY)

我真的很感谢大家的帮助和澄清/解释。

Answer 1

首先，感谢@BoltClock (两条评论)，以及其他评论和回答，感谢你的所有帮助。

我想我在我的媒体查询中犯了一个错误和/或错过了-理解他们是如何工作和互动的。我打算用下面的答案来编辑我的问题，但我认为它作为答案更有意义(因为这是我使用的解决方案)。如果这浪费了任何人的时间，我道歉。

下面是我的固定代码片段：

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

我从您的评论中意识到，如果我在第一个块中增加max-width以覆盖必要的范围/限制，那么我就可以嵌套或在它之后添加第二个块(我尝试了这两个块，它们都对我有效--使用铬浏览器18.0.1025.151)。这成功地给了我想要的结果，因为page .alpha元素的字体大小以所需的步长/间隔增加。

再次感谢所有帮助过我们的人！(以及他们帮助建立的令人敬畏的社区)

知识> OpenSource >自由

Answer 2

如果你想从移动端开始工作，你需要将移动端的布局设置为默认布局。(删除查询)。从那里，查询将从上面继承。

.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }

 /* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}