@media处理分辨率兼容性问题

版权声明：共同学习，共同进步，未经允许拒绝转载 https://blog.csdn.net/wy6250000/article/details/83016960

web项目经常会接到兼容分辨率的需求，如何让页面随着分辨率的缩放而自适应，其中一个比较好的方法就是用CSS @media查询，根据不同屏幕尺寸设置不同样式，让页面自适应效果很好
CSS @media：
语法结构：

@media screen and (max-width:300px){
     //当屏幕宽度小于300px时，加载这里的样式
}
@media screen and (max-height:600px){
     //当屏幕高度小于600px时，加载这里的样式
}
@media screen and (min-width:300px) and (max-width:600px){
     //当屏幕宽度大于300px且小于600px时，加载这里的样式
}