移动端适配

单位：

em rem % px

视口：

布局视口
视觉视口
不同的默认视口不一样，iPhone系列一般是980px
视口的缩放比：
    缩放比=设备宽度/视口宽度  390/980=0.4
        100px==>100*0.4=40
产生的问题：
    css中的px != 设备显示的px

meta视口标签的属性及含义：

修改了head的内容要重新运行
viewport：视口，配置视口
width：视口宽度=device-widh(设备宽度)，不设置时，不同设备默认视口不一样
initial-scale：缩放比，不配置视口，缩放比默认是 设备宽度/视口宽度
maximun-scale：设置最大缩放比，优先高于initial-scale
minimun-scale：设置最小缩放比
user-scale：yes/no，1/0，设置是否允许用户缩放

媒体查询

媒体：

手机/平板/电脑屏幕 screen,打印机 print

作用：

当屏幕宽度在某些范围时，样式的变化

写法：

@media 媒体/all(所有媒体)

关键字：

and 并且
not 非
only 唯一（基本不用）

媒体特性：

width 宽度
min-width 最小宽度
max-width 最大宽度

移动设备的屏幕适配区间：

<768 超小屏幕
768<= 宽度 <992 小屏幕
992<= 宽度 <1200 中屏
宽度>1200 大屏
    
vw vh：单位 view width(视口宽度) view height(视口宽度)
0-100vw 视口宽度的百分比
0-100vh 视口高度的百分比