移动端特点
PC端网页和移动端网页的不同之处
PC屏幕大，网页固定版心
手机屏幕小， 网页宽度多数为100%
分辨率分类
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的
二倍图
能够使用像素大厨软件测量二倍图中元素的尺寸
l现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px
百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定
flex布局
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
给父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
1.弹性容器
2.弹性盒子
3.主轴
- 侧轴 / 交叉轴
2、使用justify-content调节元素在主轴的对齐方式
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
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 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等 */
3.使用align-items调节元素在侧轴的对齐方式
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
作用：
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
4.使用flex属性修改弹性盒子伸缩比
伸缩比.png
flex : 值；只占用父盒子剩余尺寸
