web端和移动端样式自适应（媒体查询响应式布局）

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;
	}
}

使用媒体查询简单易上手