一、移动端特点
1 移动端和PC端网页不同点
PC端网页和移动端网页的有什么不同？PC屏幕大，网页固定版心手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？谷歌模拟器
2 谷歌模拟器
3 分辨率
屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量
PPI单位英寸内的物理像素点个数，值越大，屏幕越清晰
分辨率分类
1.物理分辨率是生产屏幕时就固定的， 它是不可被改变的
2.逻辑分辨率是由软件(驱动)决定的
3.物理像素点是屏幕中 显示图像最小的单位，如屏幕中的
4.花花绿绿不同的颜色其实就是由一个个小物理像素点来构成的
4 视口
手机屏幕尺寸都不同， 网页宽度为100%网页的宽度和逻辑分辨率尺寸相同。
思考：默认情况下，网页的宽度和逻辑分辨率相同吗？不同， 默认网页宽度是980px
目标：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）
5 二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。二倍图设计稿尺寸：750px。
二、百分比布局
图片分辨率, 为了高分辨率下图片不会模糊失真
百分比布局， 也叫流式布局效果： 宽度自适应，高度固定
三、Flex布局
Flex布局/弹性布局：是一种浏览器提倡的布局模型布局网页更简单、灵活避免浮动脱标的问题
1 Flex 布局模型构成
作用基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。Flex布局非常适合结构化布局
设置方式父元素添加 display: flex，子元素可以自动的挤压或拉伸组
成部分弹性容器弹性盒子（亲儿子才是弹性盒子，且没有块、行内、行内块元素的概念，可以直接设置宽高）
主轴侧轴 / 交叉轴
注意：
1.亲儿子才是弹性盒子，且没有块、行内、行内块元素的概念，可以直接设置宽高
2.弹性容器默认宽度为父盒子宽度100%，默认高度由内容撑开
3.如果弹性盒子不设置高度，默认高度会和弹性容器一样高，默认宽度由内容撑开
2 主轴对齐方式
修改主轴对齐方式属性: justify-content
3 侧轴对齐方式
修改侧轴对齐方式属性: align-items（添加到弹性容器）align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
4 伸缩比
属性
flex : 值;
取值分类
数值(整数)
注意 :
1.只占用父盒子剩余尺寸
2.需要在弹性容器下的弹性盒子内设置
