响应式布局-media

一、@media  响应式布局（媒体查询）

　　什么是响应式布局：一套代码实现多种设备访问一致性（pc、平板、手机）

　　优点：一直保持一个url，一套代码

　　缺点：游览器支持程度（IE8及以下不兼容）

二、@media  使用

　　语法格式1：@media only screen and (max-width:700px){
 　　　　　　　 }

　　　　only：可以排除不支持媒体查询的浏览器

　　　　screen：设备类型

　　　　max-width：设备特性

　　　　　　　设备小于700像素......

　　语法格式2：@media screen and (min-width:568px) and (max-width:1024px) and (max-height:1024px){

　　}