屏幕尺寸：
指的是屏幕对角线的长度，单位一般为英寸
物理分辨率/设备分辨率：
指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件（驱动）改变，出厂就固定了的；
逻辑分辨率：
指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的。
物理像素点：
显示图像最小单位
PPI
单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
布局视口：
移动端默认的页面宽度是980px，在没有视口标签的情况下；
理想视口：
理想视口标签：meta：vp
width=device-width---设备的宽度和视口（页面）宽度相等
initial-scale=1.0---表示现在写多少像素，在页面之中就展示多少像素，不缩放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱
flex布局
1.flex布局与float的异同：
弹性布局相对浮动布局
没有需要清除浮动；布局更加的灵活
2.flex的组成：
弹性容器：display:flex ：默认宽度和父元素宽度一样，默认的高度由内容所撑开
弹性盒子：弹性容器最近一级子元素（亲儿子子元素）
1.默认的宽度由内容撑开，默认的高度为父元素的高度（侧轴方向默认是拉伸）
2.没有块级、行内、行内块元素之分，统统都是弹性盒子（可以直接设置宽高，一行显示多个）
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行
3.主轴对齐方式：
改变主轴对齐方式 jc
flex-start 默认值，从父元素的左边开始显示
justify-content: flex-start;
flex-end 让弹性盒子整体，显示在弹性容器的右侧
justify-content: flex-end;
center 让弹性盒子整体，显示在弹性容器的中间
justify-content: center;
space-around 让空白空间环绕在弹性盒子的两侧,第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2
justify-content: space-around;
space-between 让空白空间分布在弹性盒子与弹性盒子之间，第一个和最后一个弹性盒子离弹性容器的距离为0
justify-content: space-between;
space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等
justify-content: space-evenly;
4.侧轴对齐方式：
侧轴对齐方式 ai
默认值 flex-start 从起点开始排列
align-items: flex-start;
flex-end 从终点排列
align-items: flex-end;
center 垂直居中
align-items: center;
默认值 stretch 垂直拉伸：沿着侧轴（垂直）方向拉伸弹性盒子的高度直到父元素一样高
align-items: stretch;
5.伸缩比
伸缩比：flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
2.其他的盒子宽度固定，只有一个盒子设置了flex：1 ---占据父元素剩余的宽度
总结：
弹性容器设置的属性：df jc ai
弹性盒子设置的属性：align-self flex
