CSS min-width媒体查询不生效 大屏错误匹配小断点样式

这是CSS样式层叠规则和媒体查询书写顺序共同导致的：

• 你使用的min-width类型媒体查询，规则逻辑是屏幕宽度大于等于设定值时，内部样式就生效。当屏幕宽度≥1350px时，两个媒体查询的条件会同时满足。
• CSS对同优先级的同名选择器样式，永远是后书写的规则覆盖先书写的规则。你把断点更大的min-width:1350px规则写在了前面，断点更小的min-width:1200px写在了后面，屏幕宽度≥1350px时，后加载的1140px宽度样式会直接覆盖前面的1400px设置，最终就会显示适配1200px断点的效果。

调整媒体查询的书写顺序即可：使用min-width做响应式断点时，严格按照断点值从小到大的顺序书写，保证更大断点的样式在后面，命中时能正确覆盖小断点的样式。
修复后的代码如下：

/* 先写小断点规则 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

/* 后写大断点规则，命中时自动覆盖小断点的同属性样式 */
@media (min-width: 1350px) {
  .container {
    width: 1400px;
  }
}

补充提示：如果使用max-width类型的媒体查询，书写顺序则刚好相反，需要按照断点值从大到小排列。

内容的提问来源于stack exchange，提问作者kate moss