移动WEB开发(视口，二倍图，流式布局，flex布局

视口viewport

布局视口 layout viewport
捏

视觉视口 visual viewport
滑动

理想视口 ideal viewport

meta视口标签

二倍图

物理像素（分辨率）
1300*800像素：横着可以放1300个 竖着800个

二倍图

多倍图

背景缩放background-size

cover：可能有部分显示不全
contain:宽或者高度到了就不在拉伸了（等比例拉伸）

工具：cutterman

移动端开发选择

移动端技术解决方案

特殊样式

移动端常见布局

不需要定义版心

流式布局（百分比布局）
非固定像素布局
设置盒子宽度为百分比。根据屏幕宽度伸缩，内容向两侧填充
比较常见

flex布局

总结：通过给父盒子添加flex属性，来控制盒子位置和排列方式

父项常见属性

1.flex-direction

2.justify-content
和侧轴没关系

3、flex-wrap属性
当flex一行内放不下就会硬塞

4、align-items
单行盒子

5、align-content
多行（换行）

6、flex-flow

flex子项常见属性

1、flex属性
会随屏幕伸缩（弹性）


左右的给了宽度，剩下的就是可分配的剩余空间


2、align-self

3、 order

背景线性渐变