响应式布局

响应式布局：就是一个网站能够兼容多个终端

优点：

• 面对不同分辨率的设备灵活性非常强
• 能够快捷解决多设备显示的适应问题

缺点：

• 只适合中小型网站
• 兼容各种设备工作量大，效率低下

原理：通过媒体查询来定制某个宽度空间的网页布局

媒体查询：它能够检测我们设备的宽度，通过不同的宽度显示不同的样式

超小屏幕（移动设备）：768px以下
小屏屏幕（平板设备）：768px-992px
中屏屏幕（标屏电脑）：992px-1200px
大屏屏幕（宽平电脑）：1200px以上

媒体查询的语法：

@media screen and (max-width:768px) and (min-width:320px){
    样式代码
}

@media 媒体类型（all） 关键字 媒体条件 {样式代码}