常用的媒体查询及技巧

从大到小

如果判断最大值(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、向下覆盖:宽度更大的样式会将前面宽度更小的样式覆盖。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片