CSS布局相关知识（七）：响应式布局

响应式布局

网页可以根据不通的设备或窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有设备
响应布局的关键就是 媒体查询
通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式

使用媒体查询

语法：@media 查询规则｛｝
媒体类型：

• all 所有设备
• print 打印设备
• screen 带屏幕的设备
• speech 屏幕阅读器

可以使用，连摘多个媒体类型，这样它们之间就是一个或的关系

可以在媒体类型前添加一个only，表示只有，only的使用主要是为了兼容一些老版本浏览器

媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）

max-width 视口的最大宽度（视口小于指定宽度时生效）

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化一般比较常用的断点
小于768 超小屏幕 max-width=768px
大于768小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200大屏幕 min-width=1200px

@media only screen and (min-width:500px) and(max-width:700px){
    body{
        background-color: #bfa;
    }
}