1. /*防止内容溢出 不出现滚动条 提供用户体验*/     box-sizing: border-box;  

IE盒子模型width=content+border+padding

2. -webkit-tap-highlight-color: red;     点击瞬间变色效果，默认灰色

3./*使用精灵图的公用样式,压缩原来的二倍图*/

[class^="icon_"],[class*=" icon_"]{

    background-repeat: no-repeat;

    background-image: url("../images/sprites.png");

    background-size: 200px 200px;}

在对应需要设置背景的盒子中设置background-position:0  -103px;

4.touch移动端事件

1. touch是移动端的触摸事件 而且是一组事件

2. touchstart  当手指触摸屏幕的时候触发

3. touchmove    当手指在屏幕来回的滑动时候触发

4. touchend    当手指离开屏幕的时候触发

5. touchcancel  当被迫终止滑动的时候触发（来电，弹消息）

6. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

5.使用touch:

1.绑定事件：box.addEventListener('touchstart',function () { });

2.事件对象：

名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合

changedTouches    改变后的触摸点集合，每个事件都会记录

targetTouches    当前元素的触发点集合

touches          页面上所有触发点集合

targetTouches，touches 在离开屏幕的时候无法记录触摸点

4.分析滑动实现的原理：

4.1 就是让触摸的元素随着手指的滑动做位置的改变

4.2 位置的改变：需要当前手指的坐标

4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点

4.4 clientX clientY      基于浏览器窗口（视口）

4.4 pageX  pageY        基于页面（视口）

4.4 screenX screenY      基于屏幕

6.background

/*让背景从内容开始平铺*/

    background-origin: content-box;

没有做背景裁剪 背景图默认就是从边框显示

    border-box  边框以外被裁剪掉

    padding-box 内边距以外被裁剪掉

    content-box 内容以外被裁剪掉

7.iScroll.js

iScroll.js的使用

8.artTemplate

参照12移动web视频  微金所项目  10轮播图响应式

一种类似PHP的模板引擎，<% %>通过js在html的<script type="text/template">中动态渲染Dom

9.移动端手势切换