day14-响应式布局

响应式布局

---

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

媒体查询

---

语法：

@media 查询规则{ }

媒体类型：

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

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

媒体特性

---

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

断点
样式切换的分界点，及网页的样式会在这个点发生变化；

常用的断点
小于768	超小屏幕	max-width=768px
大于768	小屏幕	min-width=768px
大于992	中型屏幕	min-width=992px
大于1200	大屏幕	min-width=1200px