一、pixel 像素知识
px 逻辑像素
dp,pt 物理像素;
dpr 设备像素缩放比;
计算公式：px = (dpr)2 * dp;
平面上 1px = dpr2 * 1dp;
纬度上 1px = dpr * 1dp;
iphone5 dpr为2
ppi 屏幕每英寸的像素数量，即单位英寸内的像素密度。
注意：我们换算的时候应该去算硬件像素，非px
二、viewport
iOS的viewport为980px;android不可控制。
手机浏览器默认做了两件事：页面渲染在viewport中，缩放。
visual viewport 视口：通过缩放变成视口viewport
layout viewport 布局
移动端font-size 为40px才能等于PC上12px同等物理大小。
meta标签改造viewport
<meta name="viewport" content="">
width：设置viewport的特定值
initial-scale：设置页面的初始缩放
minimum-scale：最少缩放
maximum-scale：最大缩放
user-scalable：用户能否缩放，一般设为no
布局viewport ＝ 设备viewport ：<meta name="viewport" content="width=device-width">(默认)
视口viewport ＝ 设备viewport：<meta name="viewport" content="initial-scale=1">（即缩放比为1）
常用：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
三、移动开发尺寸方案
1、根据设备的实际宽度，即物理宽度
2、缩放0.5，1px=1dp，1像素边框和高清图片不需要处理
四、布局
1、响应式布局
媒体查询
@media screen and(max-width:1024px){}
常用媒体查询参数：width：视口宽度
height：视口高度
device-width：设备宽度
device-height：设备高度
orientation：检查设备处于横向（landscape）还是竖向（portrait）
设计点：百分比、弹性图片、重新布局，显示隐藏
2、flexbox弹性盒子布局
根据元素个数不同，自动填充整个容器
父级：{display: -webkit-flex; } //标示使用弹性布局
等比划分
子级：{flex: 1;} //num 占容器的比例 1/(1+2)
{flex: 2;} 占容器比例2/(1+2）
混合划分
子级：{width: 100px; }固定宽度 （一般图片宽度固定）
{flex: 1;} 剩余空间等比划分 （文字）
{flex:2;}
不定宽高水平垂直居中
父级：{justify-content: center; //水平居中
align-items: center; //垂直居中
display: -webkit-flex;}
盒模型方向：flex-direction: row(默认，横向)/row-reverse(横向反方向排列)/column(纵向)/column-reverse(纵向反方向)
盒模型换行：flex-wrap: nowrap(默认，子元素不会换行)/wrap(会换行)
盒模型水平排列（用于父元素）： justify-content: flex-start(居左)/center(居中)/flex-end(居右)／space-between(两端对齐)/space-around(按间距划分，元素左右两边留相应空间)
盒模型水平排列（用于子元素）：align-self:flex-start(居左)/center(居中)/flex-end(居右)／auto(默认)/baseline(相对字体位置)/stretch(填满整个容器)
盒模型排列父子可混合用
盒模型垂直排列（用于父元素）：align-content: flex-start(居左)/center(居中)/flex-end(居右)／space-between(上下对齐)/space-around(按间距划分，元素上下留相应空间)/stretch(默认，填充满整个容器)
盒模型垂直排列（用于子元素）：align-items:
排序：order: -1(num)
五：移动web下特殊样式处理
1、1像素边框在Retina屏下的解决方案，由于在Retina屏下1像素边框会变成两像素，
｛border-top: 1px solid #666;-webkit-transform: scaleY(0.5)｝
2、适应各大屏幕手机，推荐使用rem
rem根据html的font-size为相对单位
em根据父节点的相对单位
rem = screen.width/20
一般字体不用rem
3、文本溢出
单行文本溢出{overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis}
多行文本溢出{display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient:vertical; //方向垂直
-webkit-line-clamp:2 //多少行}
六、终端交互优化
1、tap事件代替click事件
因为手机为了判断单击和双击，延迟300ms。
tap事件定义：记录touchstart、touchend时记录时间、手指位置，如果手指位置是同一位置，且间隔时间较短（一般200ms）,即可认为是手机上的click。
zepto.js移动框架库