响应式布局

视口单位

vw
相对于视口宽度，视口被分为100单位的vw，1vw等于视口宽度的1%

vh
相对于是扣的高度，视口被均分为100单位的vh，1vh等于视口高度的1%

vmin
选取vw和vh中最小的那个

vmax
选取vw和vh中最大的那个

em
em是指相对于父元素的字体大小的单位

rem
rem是指相对于根元素的字体大小的单位

媒体查询语法

媒体类型

all
适合于所有设备

print
适用于在打印预览的模式下

screen
主要用于屏幕

speech
主要用于语音合成器

媒体特性

width
viewport的宽度，有max-width与min-width

height
viewport的高度，有max-height与min-height

aspect-radio
viewport的宽高比

orientation
viewport的旋转方向，有portrait（竖屏）与landscape（横屏）两种

逻辑运算符

and
用于将多个媒体查询规则组合成单挑媒体查询

not
用于否定媒体查询，如果不满足这个条件则执行内容，否则将不执行

only
用于旧版浏览器识别媒体类型使用

逗号
用于将多个媒体查询合并为一个规则

link标签方式

通过给link标签添加media属性设置媒体查询类型和媒体特性

响应断点（阈值）的设定

编写位置

添加到样式表底部，对css进行优先级的覆盖

阈值设定

Extra small<576px
Small>=576px,-sm
Medium>=768px,-md
Large>=992px,-lg
X-Large>=1200px,-xl
XX-Large>=1400px,-xxl