web端和移动端样式自适应(媒体查询响应式布局)
在遇到需要适应多端情况是,可以选择使用媒体查询响应式布局,简单好用
首先适应最小机型,例如你要在最小机型的某一个div加上边框 那么如下写法 再把机型切换小 就可以看到效果了
@media screen and (max-width:360px){
.rule{
border: 1px solid #FF5A5A;
}
}
这里是适应比如ipad这种宽度机型的,同上也是切换机型就可以看到效果
@media screen and (max-width:768px){
.rule{
border: 1px solid #FF5A5A;
}
}
这里就是适应web端大小了
@media screen and (min-width:768px) {
.rule{
border: 1px solid #FF5A5A;
}
}
使用媒体查询简单易上手