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时,加载这里的样式
}