Web前端学习笔记——响应式布局

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

使用媒体查询：语法： @media 查询规则（）
媒体类型：
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