移动端代码规范

1. 安全边距：15px,用px就行

2. 整体使用：box-sizing: border-box;设置padding时会往里面撑而不会向外，设置宽度为100%时不会占用padding部分

3. rem布局:

//css
html{font-size:20px}
//js
function setFontSize() {
    document.documentElement.style.fontSize = window.innerWidth / 16 + 'px';
}
setFontSize();
window.addEventListener('resize', function() {
    setFontSize();
});
//尺寸计算：样式的rem = ps测量尺寸/2/20 （一般设计图宽度为640px）

4. 点击300ms延迟

//fastclick.js

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);
//或者使用zepto.js代替jquery

5. 头部

        
        
         //iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏
        
        
            
            
        
        
        
        
        
        
        
        
        
        
    

6. 移动端轮播图（swiper）

        
        

            

                
![](../img/banner.jpg)
                
![](../img/banner.jpg)
                
![](../img/banner.jpg)
            
            //左右按钮和分页器写成自己的样式，也用rem去写
            

            

            

        

    
    
    
    

7. 1px的线
   参考weui解决办法
   https://weui.io/
   https://github.com/Tencent/weui.js

8. 清除输入框内阴影
   在 iOS 上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样操作：

input,
textarea {
    border: 0; 
    -webkit-appearance: none; 
}

9. 头部和底部使用固定定位定住，注意要设置内容div的margin，不然顶部和头部会遮挡住内容

10. 常用a链接

//发邮件
Email
//发短信
123456
//打电话
123456
//跳转到下一页的指定位置,本页面的a标签 后边加上#XXX，传入一个锚点,新页面指定位置加上idXXX

这里是指定位置

11. 设置文字超出部分省略 父级div设置overflow:hidden

//适用于单行文本
p{
  display:block;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

12. 动画

//尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
//一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：
#ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
  -webkit-transform: translate3d(500px, 0, 0);
}
#ball-2 {
  transition: left .5s ease;
  left: 0;
}
#ball-2.slidein {
  left: 500px;
}
//3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
//尽可能少的使用box-shadows与gradients
//尽可能的让动画元素不在文档流中，以减少重排
position: fixed;
position: absolute;
//消除transition闪屏
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility:?hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

13. 图片压缩 https://tinypng.com/