常用的媒体查询及技巧

从大到小

如果判断最大值(max-width)，那么就应该从大到小写

@media (max-width: 1200px) {

}
@media (max-width: 992px) {
   
}
@media (max-width: 768px) {
   
}

从小到大

如果判断最小值(min-width)，那么就应该从小到大写

@media (min-width: 480px) {

}
@media (min-width: 768px) {
   
}
@media (min-width: 992px) {
   
}
@media (min-width: 1200px) {
   
}

当判断最小的值，并且从小到大进行判断（当满足条件的时候）；

1、向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围；

2、向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖。