1, 移动端特点
PC端网页和移动端网页的有什么不同？
- PC屏幕大，网页固定版心
- 手机屏幕小， 网页宽度多数为100%
如何在电脑里面边写代码边调试移动端网页效果？
谷歌模拟器
屏幕尺寸
指的是屏幕对角线的长度，一般用英寸来度量
1.1分辨率
1.1.1 PC分辨率
主流分辨率： 1920 * 1080 ； 1366 * 768 ; ...
缩放150%： （1920/150%）*（1080/150%）
总结：
硬件分辨率-出厂的时候已设置好，不能更改
缩放调节的分辨率-由软件设置，可以更改
1.1.2 分辨率分类
1，物理分辨率是生产屏幕时就固定的，它是不可被改变的
2，逻辑分辨率是由软件（驱动）决定的
网页制作参考逻辑分辨率
设计师出设计图参考物理分辨率
2，视口
作用：显示HTML网页的区域，用来约束HTML尺寸。
标准写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0" maximum-scale="1.0" user-scable="0">`
viewport：视口 width=device-width ：宽度=设备宽度 initial-scale=1.0 :s缩放倍数；1倍 maximum-scale="1.0" ：最大缩放倍数：1倍 user-scable="0" ：不允许用户缩放页面或者为 no；如果为 yes 则允许用户缩放
3，二倍图
目标：能够使用像素大厨软件测量二倍图中元素的尺寸
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px
4，百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
5，Flex布局（重点）
5.1特点：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
5.2设置方式：
父元素添加 display: flex，子元素可以自动的挤压或拉伸
5.3组成部分：
1，弹性容器
2，弹性盒子
3，主轴 （添加到弹性容器）
4，侧轴 / 交叉轴（添加到弹性容器）
5.4父项常见属性
1，flex-direction：设置主轴的方向
语法：
flex-direction：column;
主轴默认是水平方向，侧轴默认是垂直方向
注意：一旦修改了主轴对齐方式，需要选择对应的属性实现主轴/侧轴 对齐方式
/* 主轴方向：列 */
flex-direction: column;
/* 水平居中 */
align-items: center;
/* 垂直居中 */
justify-content: center;
}
2， justify-content：设置主轴上的子元素排列方式
3，flex-wrap：设置子元素是否换行
- 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
- nowrap 不换行
- wrap 换行
4，align-content：设置侧轴上的子元素的排列方式（多行-少用）
注意：align-content只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。
5，align-items：设置侧轴上的子元素排列方式（单行-常用）
注意：stretch 是默认值，如果子盒子不需要拉伸，则需要修改对应的值
5.5子项常见属性
1，flex:数值 弹性盒子的伸缩比，表示子项目占的份数
2，align-self: 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
align-self 和 align-items 的区别：
1，align-items 是添加给父级的 2，align-self 是添加给子级的
6，小结：
1，同时设置flex和width,浏览器会优先执行flex
2,如果同时有5个子盒子，只有3个盒子给了flex属性，那么flex 的占比=（父盒子宽度-2个盒子的宽度）/3
3,在flex 眼中， 标签不再分类：
-
没有块，行内块元素之分
-
任何一个元素都可以直接给宽和高在一行显示
4， flex 不存在脱标的情况
5， flex 布局在PC端存在兼容性问题
