移动端特点
屏幕尺寸
指的是屏幕对角线的长度，一般用英寸来度量
分辨率
硬件分辨率（出厂设置）
缩放调节的分辨率（软件设置）
分辨率分类
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的
视口
视口.png
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）
百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
Flex布局
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
作用
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
设置方式
父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
弹性容器
弹性盒子
主轴
侧轴 / 交叉轴
主轴对齐方式
修改主轴对齐方式属性: justify-content
修改主轴对齐方式属性.png
侧轴对齐方式
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
侧轴对齐方式.png
伸缩比
属性
flex : 值;
取值分类
数值(整数)
