响应式 与 自适应 em， rem， vw
响应式： 根据分辨率不同显示不同 布局变了
自适应： 百分比布局 混合布局 rem布局（等比缩放）布局没变
弹性布局Flex
分栏布局
column-count : auto | 整数 控制栏数
column-width : auto | length 每栏宽
column-gap : length 两栏之间间距
column-rule : 宽度 线型 颜色 栏栏间隔线
column-span : all/none 是否跨栏显示
mediatype
and | not | only
外链：
<link rel = "stylesheet" media = "sreen and (min-width : 1024px)" href = "xxx.css" />
内嵌：
@mediascreenand (max-width:1000px) {}
@mediaonlyscreenand (min-width:1200px) {}
@mediaonlyscreenand (max-width:800px)and (min-width:0){}
vw，vh：
1vw=3.75px
vw : viewpoint width 视窗宽度 1vw=视窗宽度的1%
vh : viewpoint hight 视窗高度 1vw=视窗高度的1%
vmin : vw和vh中较小的那个
vmax : vw和vh中较大的那个
meta设置 页面窗口自动调整到设备宽度 并禁止用户缩放页面
<meta name="viewport" 控制大小
content=" width=device-width , 设备宽度
initial-scale=1.0 , 初始缩放比例
minimum-scale=1.0 , 允许用户缩放最小比例
maximum-scale=1.0 , 允许用户缩放最大比例
user-scalable=no" /> 用户是否可以手动缩放
现代浏览器默认字体大小是16px
em 根据 父元素而定
rem 根据 根元素而定（html，body）
例如： html 里 font：100%；1em = 16px；
react插曲：
若有用react小伙伴可以去试试react-responsive
原理：写出多套html 根据不同的分辨率显示不同的结构