-
#webkit
-
视口（viewport）：
-
二倍图：物理像素（手机分辨率）电脑端px相等，手机端不一样，由来：把100x100图片压缩为50x50然后再放到手机里面，就能达到理想图片
-
ps切图：cutterman可以直接切几倍图，
-
布局方案：1. 单独移动页面，包括：流式布局（百分比布局）、flex弹性布局、less+rem+媒体查询布局、混合布局。
-
响应式页面（通过判断屏幕来缩放）包括：媒体查询、bootstarp
-
移动端初始化 normalize.css
-
css3盒子模型（box-sizing=border-box）：相比传统添加margin盒子会变大，要手动减少。而在css3中可以通过box-sizing=border-box；让他无论添加什么盒子大小都不会改变，为css3新加的，老版本浏览器不支持。移动端全用c3盒子模型。
-
移动端布局：不像pc那样有版心。
-
百分比布局：宽度设置百分比，宽度要设置，为了防止拉伸过度设置max-width、min最大最小宽度。
10.二倍精灵图：先把精灵图缩放一半，定位用缩放后的坐标，bgc-size：原图片缩放一半 auto； -
去除图片上方空白空隙：vertical-align：top、
-
1
-
flex弹性布局
-
通过给父元素添加flex，来控制子元素排放位置。
-
父元素属性： flex-direction：设置主轴方向；justify-content：设置主轴上子元素排列的方式；flex-wrap：设置子元素是否换行；align-content：设置侧轴上的子元素垂直排列方式(多行）；align-items：设置侧轴上的子元素排列方式（单行）；flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap；
-
子元素属性：flex：数字，划分剩余空间。数字代表占用几份 。order：数字，可以把第二个提前到第一个（数值越小越提前默认0） 、 align-self：flex-end；控制子元素在侧轴上的排序。
