21-媒体查询

响应式布局

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

• 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式

  媒体查询

  媒体查询语法

• @media查询规则{}

  媒体类型

• all 所有设备

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

可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器

媒体特性

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

  断点

  样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化一般比较常用的断点

示例
当屏幕宽度为500px和700px之间时，背景色变为#bfa

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