媒体查询使用途中遇到的小问题

问题描述

写了桌面端网页之后，使用媒体查询适配手机端时候，语法格式都正确

@media screen and (max-width: 600px){
.row{
  flex-direction: column;
}
.col-4-1 {
  width: 100%;
}
}

运行之后，布局排列方式改为从上往下了，但是col-4-1类却没有变为100%，寻找测试了各种方法，都不管用。

于是思考为什么第一个生效第二个不生效。是把媒体查询写在了css最前面，初始的css适配的桌面端没有设置排列方式，col-4-1类初始化是50%宽度，按照层叠顺序媒体查询里定义的row排列方式是能初始生效，但是col-4-1反而是后面的50%覆盖了100%。

解决方法

如果媒体查询的样式表在其他样式表之前加载，那么媒体查询会失效。这是因为媒体查询是根据设备特性来判断是否应用样式，如果样式表还没有加载，设备特性无法获取。解决方法是将媒体查询的样式表放在其他样式表之后加载。

媒体查询写在css最后面，即可生效

@media screen and (max-width: 600px){
.row{
  flex-direction: column;
}
.col-4-1 {
  width: 100%;
}
}

运行，调整宽度，适配成功