css @media min-width max-width 解释

@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 起作用

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

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

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