一、手机浏览器默认为我们做的两件事情：
1.页面渲染在一个980px(ios)/640(aniord)的viewport里面（为了排版正确）
2、默认缩放
二、<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
三、不定宽高的水平垂直居中：
方法1：box{
postion:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
z-index:3;
border-radius:6px;
background:#000;
}
方法2 ：flex版：
box{
display:flex; //设为弹性盒子
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
}
四、响应式设计：
媒体查询(根据不同的屏幕宽度，设置不同的css样式，显示或隐藏等)
图片响应式：
img{
display:block;
max-100%;
}
五、1像素边框：
同样是retina屏幕下，根本原因：1px使用2dp渲染。
解决方法：border:0.5px(但仅仅ios8可以用)
更好的方法：scaleY(.5)
li{padding:8px 0 8px 15px;color:#ccc;cursor:pointer;postion:relative;}
li:bofore{postion:absolute;top:-1px;left:0;content:'';100%;height;1px;border:1px solid #000;-webkit-tranform:scaleY(.5);}
六、相对单位：
rem的基值设置：
rem=screen.width/10;
//默认320px
html{font-size:32px;}
//iphone6
@media(min-device-375px){
html{font-size:37.5px;}
}
//iphone6 plus
@media(min-device-414px){
html{font-size:41.4px;}
}
建议：一般情况下，文字和一些固定元素，最好使用px
单行文本溢出...
txt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
多行文本溢出...
text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-camp:3;word-break:break-all;}
七、事件：为什么移动设备上不使用click事件---有300ms延迟 怎么破？
使用tap代替click事件：Zepto封装
原理：在touchstart /touchend时，记录时间和手指位置，然后进行比较，如果位于同一位置且时间较短（<200ms）,且未触发touchmove，即可认为tap事件，即移动设备上的click。
click事件触发过程：
touchstart--touchend--300ms--click触发
tap事件过程：
touchstart--touchend--tap触发
点透发生过程：
touchstart(点击蒙层)--touchend(蒙层消失)--300ms--target为btn,click触发
局部滚动开启弹性滚动：
body{overflow:scroll;-webkit-overflow-scrolling:touch;}