目录
媒体查询
响应式布局
- 网页可以根据不通的设备或窗口大小呈现出不同的效果
- 使用 响应式布局，可以使一个网页适用于所有设备
- 响应布局的关键就是 媒体查询
- 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
媒体查询
媒体查询语法
@media查询规则{}
媒体类型
all所有设备print打印设备screen带屏幕的设备speech屏幕阅读器
可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器
媒体特性
width视口的宽度height视口的高度min-width视口的最小宽度（视口大于指定宽度时生效）max-width视口的最大宽度（视口小于指定宽度时生效）
断点
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化一般比较常用的断点
| 范围（px） | 类型（屏幕） | 写法（媒体特性） |
|---|---|---|
| 小于768 | 超小屏幕 | max-width=768px |
| 大于768 | 小屏幕 | min-width=768px |
| 大于992 | 中型屏幕 | min-width=992px |
| 大于1260 | 大屏幕 | min-width=1200px |
示例
当屏幕宽度为500px和700px之间时，背景色变为#bfa
@media only screen and (min-width:500px) and (max-width:700px) {
body{
background-color: #bfa;
}
}