1

我的 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从适用的早期语句继承，或者我是否不得不重复每个语句所需的所有规则？（不是很干）

我真的很感激任何帮助和澄清/解释。

4

2 回答 2

3

首先感谢@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）

知识 > 开源 > 自由

于 2012-08-25T18:37:42.170 回答
1

如果您想在移动设备上工作，则需要将移动布局设置为默认布局。（删除查询）。从那里查询将从上面继承。

.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; }
}
于 2012-08-25T14:28:33.193 回答