一、@media 响应式布局（媒体查询）
什么是响应式布局：一套代码实现多种设备访问一致性（pc、平板、手机）
优点：一直保持一个url，一套代码
缺点：游览器支持程度（IE8及以下不兼容）
二、@media 使用
语法格式1：@media only screen and (max-700px){
}
only：可以排除不支持媒体查询的浏览器
screen：设备类型
max-width：设备特性
设备小于700像素......
语法格式2：@media screen and (min-568px) and (max-1024px) and (max-height:1024px){
}