为什么媒体查询的顺序在CSS中很重要？
最近，我一直在设计响应速度更快的网站，并且经常使用CSS媒体查询。我注意到的一种模式实际上是定义媒体查询的顺序。我没有在每个浏览器中都进行过测试，只是在Chrome上进行了测试。有这种行为的解释吗？有时，当您的网站无法正常运行时，它会令人沮丧，并且您不确定这是查询还是编写查询的顺序。
这是一个例子：
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS：
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
但是，如果我最后一次为1024x600编写查询，浏览器将忽略它，并应用CSS开头指定的边距值（margin-top：2em）。
/* Media Queries - Re-arranged version */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
如果我对媒体查询的理解是正确的，则顺序无关紧要，但看起来确实如此。可能是什么原因？
问题答案：
那是CSS的设计-级联样式表。
这意味着，如果将两个规则碰撞到同一元素，它将选择最后一个已声明的规则，除非第一个规则具有!important标记或具有更具体的含义（例如，html >body与just相比body，后者则较不具体）。
因此，鉴于此CSS
@media (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}
如果浏览器窗口的宽度为350像素，则背景为蓝色，而使用此CSS
@media (max-width: 400px) {
body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
并且窗口宽度相同，背景将变为红色。这两个规则确实匹配，但是第二个是被应用的，因为这是最后一个规则。
最后，用
@media (max-width: 400px) {
body {
background: blue !important;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
要么
@media (max-width: 400px) {
html > body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
背景为蓝色（窗口宽度为350像素）。
-
问题内容： 我们如何准确地间隔媒体查询以避免重叠？ 例如，如果我们考虑以下代码： 在所有支持的浏览器上，分别以20em和45em会发生什么？ 我见过人们在使用：像799px然后是800px之类的东西，但是屏幕宽度为799.5 px呢？（显然不是常规显示器，而是视网膜显示器？） 考虑到规格，我对此最好奇。 问题答案： CSS媒体查询重叠的规则是什么？ 级联。 规则对级联是透明的，因此当两个或多个规则
-
主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
-
我想将此条件转换为CSS媒体查询： 编辑： 事实上，我想在这种情况下瞄准Ipad： 因此，如果是任何设备和当前宽度，则应应用CSS 谢谢
-
问题内容： 这让我发疯！我看了一些关于Stackoverflow的问题，发现ID元素的优先级高于类元素（这很高兴知道，但是我感觉这不是我的问题）。这是我苦苦挣扎的NAVIGATION菜单。（我使用最大宽度顺便说一句） 这是我的资产净值的一般CSS： 现在，当视口小于1140px时，我希望CSS更改菜单，如下所示： 因此，基本上，菜单将以较少的顶部填充向左浮动。 当视口小于800像素时，我希望CSS
-
我目前正在努力获得一个CSS网格来处理一些较小屏幕尺寸的媒体查询。我基本上有一个两行三列的网格，在较小的屏幕尺寸下，它可以向下延伸到三行两列。我想让它进入一个网格，在一个电话大小的屏幕上有6行和一个主列。以下是我目前的代码： } 这在很大程度上是可行的。然而，出于某种奇怪的原因，尽管我在上面做了一些粗制滥造的努力，但这些框并没有集中在较小的屏幕上。下面是完整的代码笔来说明我的问题：https://
-
我正在做一个装在盒子里的计数器。我试图使这个计数器对不同的屏幕大小做出响应，但由于某些原因，我试图使用的媒体查询将无法工作。 我曾尝试将设备宽度更改为768px以下，但查询对计数器没有影响，我不确定原因。我已经包括了计数器的HTML/PHP代码以及CSS。有人知道为什么它不起作用吗 我已确保此标签包含在文档的标题中。 超文本标记语言： CSS：