移动端特点与flex布局
谷歌浏览器有个切换按钮可以切换手机和电脑的调试方式
手机模拟情况可以选择手机型号，一般默认自适应模式。
屏幕尺寸
PPI（像素密度）：单位英寸内的物理像素点的个数，值越大越清晰。
物理像素点：形成图像的最小单位。
物理分辨率生产时就固定的，出厂就决定的不可被改变的。
逻辑分辨率，由软件或者驱动改变。页面一般是根据逻辑分辨率设计的。
DPR：物理比逻辑的比率
项目做图是根据DPR来做设计图的
设计图像素=设备像素比*DPR
像素大厨内可以设置二倍图
流式布局：宽度百分比高度固定。
flex弹性布局
只需要给需要一行显示的父元素display：flex这个属性
外面的叫弹性容器，里面的叫弹性盒子。
弹性盒子：弹性容器最近一级的子元素，默认宽度由内容撑开，
默认高度等于父盒子高度。
弹性盒子不会换行，会压缩自身宽度一行显示，压缩过头也超出父盒子一行显示。
弹性盒子脱标，就叫弹性盒子，不会叫什么块什么行内什么行内块。
justify-content：系列用法
flex-start 默认值，从左到右
flex-end 终点开始依次排列
center 沿主轴中心排列
space-around 弹性盒子沿主轴中均匀排列，空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴中均匀排列，空白空间均分在盒子之间。与父盒子两边没有距离
space-evenly 弹性盒子沿主轴中均匀排列，弹性盒子与容器距离相等
align-items 沿侧轴排列
flex-start 默认，起点开排
flex-end 终点开排
center 沿侧轴中间排
stretch 默认值，弹性盒子沿着主轴线被拉伸至铺满容器。
align-self 单独出列
flex属性
（flex；数字）是给弹性盒子添加
用法1：所有的弹性盒子都添加相同的flex值，均分弹性盒子宽度。
用法2：每个弹性盒子设置不同数字的flex，按数字比率分配父盒子宽度
用法3：只有一个弹性盒子有flex：1，他占据剩余宽度。
df+jcc+aic 水平垂直都居中
