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语句'trumped'！）

从我所看到的情况来看，通过测试和一些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; }
}

我从你的评论中意识到，如果我增加第一个区块中的最大宽度以覆盖必要的范围/限制，那么我可以嵌套或添加第二个区块（我尝试了两个并且它们都适合我 - - 使用铬浏览器[18.0.1025.151]）。这成功地给了我想要的结果，因为page .alpha元素的字体大小以所需的步进/间隔增加。

再次感谢所有帮助过的SO'ers！（以及他们帮助建立的令人敬畏的社区的SE）

知识＆gt; OpenSource＆gt;自由

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

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

2 个答案: