移动端布局，待续

1. #webkit 处理webkit内核就行

2. 视口（viewport）：meta视口标签的目的：可以让设备有多宽我们布局的视口就多宽

3. 二倍图：物理像素（手机分辨率）电脑端px相等，手机端不一样，由来：把100x100图片压缩为50x50然后再放到手机里面，就能达到理想图片

4. ps切图：cutterman可以直接切几倍图，

5. 布局方案：. 单独移动页面，包括：流式布局（百分比布局）宽度设置百分比，高度设置固定，可以设置最小最大缩放距离，max-width。min-width

6. 、flex弹性布局、less+rem+媒体查询布局、混合布局。

7. 响应式页面（通过判断屏幕来缩放）包括：媒体查询、bootstarp

8. 移动端初始化 normalize.css

9. css3盒子模型（box-sizing=border-box）：相比传统添加margin盒子会变大，要手动减少。而在css3中可以通过box-sizing=border-box；让他无论添加什么盒子大小都不会改变，为css3新加的，老版本浏览器不支持。移动端全用c3盒子模型。主要用于外层盒子百分比

10. 移动端布局：不像pc那样有版心。

11. 百分比布局：宽度设置百分比，宽度要设置，为了防止拉伸过度设置max-width、min最大最小宽度。
    10.二倍精灵图：先把精灵图缩放一半，定位用缩放后的坐标，bgc-size：原图片缩放一半 auto；

12. 去除图片上方空白空隙：vertical-align：top

13. flex弹性布局

14. 通过给父元素添加flex，来控制子元素排放位置。

15. 父元素属性： flex-direction：设置主轴方向；justify-content：设置主轴上子元素排列的方式；flex-wrap：设置子元素是否换行；align-content：设置侧轴上的子元素垂直排列方式(多行）；align-items：设置侧轴上的子元素排列方式（单行）；flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap；

16. 子元素属性：flex：数字，划分剩余空间。数字代表占用几份 。order：数字，可以把第二个提前到第一个（数值越小越提前默认0） 、 align-self：flex-end；控制子元素在侧轴上的排序。

17. 多数用于移动端
    父元素设置
    display：flex
    最好顺便设置min-width最小宽度
    flex-direction：column；可以把左到右排列变成上到下排
    子元素
    flex：1/2/3（把父元素内容划分）相对于width33.3%来说，省略了宽度、浮动、以及设置33.3%后不能设置margin之类的属性

justify-content：space-around相当于给盒子添加相同的左右外边距离，用于水平居中
align-items:stretch;用于垂直居中 针对一行
align-content:center；垂直居中 此方法针对多行。其必须对父元素设置display：flex；
排列方式为横向排列flex-flow：row wrap；（必须有要不然不显示）

• rem是一个单位
• 可以让字体随着浏览器进行变化大小，以上两种针对宽度，rem针对高度，等比例缩放
• em相对于父元素的字体大小，而rem则相对于html的字体大小