移动端适配

单位： em 、rem、% 、px

viewport:视口，配置视口

content="width=device-width ：width视口宽度=device-width(设备宽度)，不设置时，不同设备默认视口宽度不一样

ivitial-scale:初始缩放比例

maximum-scale:设置最大缩放比

minimum-scale:设置最小缩放比

user-scale:yes/no ;1/0 ; 是/否

视口：布局视口(布局就是溢出页面宽度的)、视觉视口(就是页面能看到的宽高)。

不同设备，默认视口不一样

视口的缩放比：缩放比=设备宽度÷视口宽度 ；390/980=0.4 ；100px===》100*0.4=40 ; 1=设备显示的px

媒体查询

媒体有:手机/平板/电脑等这常用的三种媒体
作用：当屏幕到达某一宽度时会发生变化

写法:@media screen(可有可无) 媒体/all(所有媒体)
and (并且)
not (排除)
only (基本不用)
特性:width:宽度
min-width:(最小宽度)
max-width :(最大宽度)

小记一下屏幕宽度 ：
小于768 超小
768-992；小
992-1200 ；中
大于1200 大

vw = view width(视口宽度)
vh = view height (视口高度)
0-100vw 视口宽度的百分比
0-100vh 视口高度的百分比