css media 顺序,@media 注意事项 写作顺序问题（非常重要）

这简直是个小技巧，一开始我也十分纳闷。为什么写的有些 @media 没有起作用。原来有这么回事：

我们知道 min-width 表示最小即大于等于， max-width 表示最大即小于等于； 但我们也很清楚 CSS 样式 跟 DOM 结构 跟 JS 一样 从前往后加载，后面重复代码会覆盖之前代码。

那么这样的顺序有问题吗？

/*样式1*/

@media (min-width: 320px) {

.container{ width: 92%; margin: 4%; }

}

/*样式2*/

@media (min-width:320px) and (max-width: 640px){

.container{ width: 86%; margin: 7%; }

}

/*样式3*/

@media (max-width: 640px) {

.container{ width: 80%; margin: 10%; }

}

会发生什么？

当 device-width <= 640 时 样式3 起作用

当 640 <= device-width <= 321 时 样式2 起作用但无效

当 device-width >= 640 时 样式1 起作用

Question3： 为什么上面代码不起起作用但无效？

min-width：320px 即 width >= 320px

max-width: 640px and min-width: 32px 即 640 <= width <= 320px

max-width: 640px 即 width <= 640px

Answer3：根据 CSS 从上至下执行的规律以及我们的分析：

当视窗宽度大于等于 320px 时候执行样式1，(有效)

当视窗宽度小于等于 640px 大于等于 320px 时执行样式2，有效但无法使用，因为被 样式3 覆盖。( CSS 解析器跟 JS 一样在相同方法上覆盖之前定义的方法 )

当视窗宽度小于等于 640px 时执行样式3。(有效)

解决办法：

调整顺序并适当修改，

当 width <= 320px 时，执行 样式1;

当 640px <= width <= 321px 时，执行 样式2；(给 min-wdith 的值 +1px 以让 devic-width 值等于320时 样式2 不会覆盖 样式1)

当 width >= 641px 时，执行 样式3；

代码如下：

/*样式1*/

@media (max-width: 320px) {

.container{ width: 92%; margin: 4%; }

}

/*样式2*/

@media (min-width:321px) and (max-width: 639px){

.container{ width: 86%; margin: 7%; }

}

/*样式3*/

@media (min-width: 640px) {

.container{ width: 80%; margin: 10%; }

}