1、mousewheel

IE6首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta属性。当用户向上滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向下滚动鼠标滚轮时，wheelDelta是-120的倍数。

2、DOMMouseScroll

Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发。与mousewheel事件一样，DOMMouseScroll也被视为鼠标事件，因而包含于鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中，当向上滚动鼠标滚轮时，这个属性的值是-3的倍数，当向下滚动鼠标滚轮时，这个属性的值是3的倍数。火狐内核FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值，而其他浏览器是负值。

function() {
            $(document).on("mousewheel keydown DOMMouseScroll",
            function(t) {   /*t是传进去的event对象，里面包含wheelDelta等属性，滚轮向上滑其值为120，向下为-120*/
                console.log(‘t‘,t);
                if (!e()) {
                    t = t || window.event;
                    var n = t.wheelDelta || -t.detail;
                    0 > n || 40 == t.keyCode ? 3 >= s && s++:(n > 0 || 38 == t.keyCode) && s >= 1 && s--,
                    o()
                }
            })
        } (),

touch事件

参考：http://www.cnblogs.com/yanxuan/p/6160630.html

在移动端页面开发时，常常会用到touch事件，比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。

每个事件包含下面三个用于跟踪虎摸的属性：

　　touches：表示当前跟踪的触摸操作的touch对象的数组。

　　targetTouches：特定于事件目标的Touch对象的数组。

　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

 每个touch事件包含下面的属性：

　　clientX：触摸目标在视口中的x坐标。

　　clientY：触摸目标在视口中的y坐标。

　　identifier：标识触摸的唯一ID。

　　pageX：触摸目标在页面中的x坐标。

　　pageY：触摸目标在页面中的y坐标。

　　screenX：触摸目标在屏幕中的x坐标。

　　screenY：触摸目标在屏幕中的y坐标。

　　target：触摸的DOM节点目标

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + ‘px‘;

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

<script type="text/javascript">/*根据js监控页面的窗口大小 然后响应改变所有 font-size的大小*/
        (function () {
            function remSize() {
                let sw = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = Math.floor(sw / 4.14) + ‘px‘;    /*4.14，设计稿的横向分辨率（iPhone7 plus）414/100得来*/
            }
            window.onresize = remSize;/*onresize 事件会在窗口或框架被调整大小时发生*/
            window.onload = remSize;
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
                let sw = document.documentElement.clientWidth;
                var angle = window.screen.orientation.angle || window.orientation;
                if (sw < 769 && (angle === 90 || angle === -90)) {
                    alert("竖屏浏览体验更佳，亦可使用PC");
                }
            });/*移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机旋转角度*/
        })();
    </script>

.page2 .project {
    display: table;   /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
    height: 100px;
    width: 450px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 1px 3px 3px 0 #b9b9b9;
    border-radius: 2px;
    opacity: 0;
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px
}

.page2 .project .pro-img {
    display: table-cell;     /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    vertical-align: middle
}
.page2 .project .pro-txt {
    display: table-cell;
    text-align: left;
    padding: 0 10px
}
.page2 .project .pro-btn {
    display: table-cell;
    vertical-align: middle
}

.page4 .history .intro>dd {
    display: list-item;   /*此元素会作为列表显示。*/
    list-style-type: circle   /*空心圆*/
}