3.27移动端 、布局、实战演练
一、移动端的特点
1、移动端和pc端网页的不同点
pc端屏幕大 网页固定版心
手机屏幕小， 网页宽度多数为100%
2、谷歌模拟器
使用谷歌模拟器调试移动端网页
3、分辨率
以逻辑分辨率为主
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的（可以放大缩小 、或者更改模式）
自己做适配的时候最好放在所用的分辨率的百分百去做。
4、视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
目标：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
手机屏幕尺寸都不同， 网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。
5、二倍图
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px。
可以用像素大厨2x 做开发。
二、百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
三、flex布局（弹性布局）
能够使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
作用
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
设置方式
1、父元素添加 display: flex，子元素可以自动的挤压或拉伸 justify-content 在主轴（左右）对齐
flex-start :默认值, 起点开始依次排列
flex-end :终点开始依次排列
center：沿主轴居中排列
space-around：弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between:弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间经常用
space-evenly:弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
2、侧轴对齐（上下）使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
flex-start ：默认值, 起点开始依次排列
flex-end ：终点开始依次排列
center ：沿侧轴居中排列
stretch ：默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
3、伸缩比
属性：flex：值（整数）
注意：只占用盒子剩余尺寸 当已有一个固定大小的盒子剩下的空间要分配时 在对应的子元素标签里加flex：值 可以将剩下的空间进行比例分配。
组成部分
弹性容器
弹性盒子
主轴
侧轴 / 交叉轴
