关于rem的网页适配以及JS实现页面滑动（jquery）

CSS

* {
  margin: 0;
  padding: 0;
}
html{
    height: 100%;
    width: 100%;
    font-size:20px;/* 1rem */
}

html定义font-size为20px，即1rem = 20px
之后就可以这样定义了：

  width: 16rem;
  height: 28.4rem;

当然，如果仅仅是这样的话是无法适配大部分（不敢说所有）的手机机型的，所以必须要动态修改html的font-size：

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

这样，整个页面就可以有一个统一的大小单位rem了，之后使用rem定义字体大小、长宽、间距等等。

页面滑动
1.引入jquery.min.js
2.页面主体

<div class="wrap" id="J-wrap">
    <ul id="J-ul">
        <li class="img img-1"></li>
        <li class="img img-2"></li>
        <li class="img img-3"></li>
        <li class="img img-4"></li>
        <li class="img img-5"></li>
        <li class="img img-6"></li>
        <li class="img img-7"></li>
    </ul>
</div>

3.页面的CSS

.wrap {
  width: 16rem;
  height: 28.4rem;
  overflow: hidden;
}
.wrap ul {
  width: 112rem;// 7张图片，每张16rem宽
  height: 28.4rem;
  list-style: none;
  margin-left: 0;
  position: relative;
}
.wrap ul .img {
  width: 16rem;
  height: 28.4rem;
  float: left;
  background-size: cover;
}
.img-1 {
  background: url("XX.png") no-repeat;
}
.img-2 {
  background: url("XX.png") no-repeat;
}
.img-3 {
  background: url("XX.png") no-repeat;
}
.img-4 {
  background: url("XX.png") no-repeat;
}
.img-5 {
  background: url("XX.png") no-repeat;
}
.img-6 {
  background: url("XX.png") no-repeat;
}
.img-7 {
  background: url("XX.png") no-repeat;
}

4.JS
绑定touchstart、touchmove、touchend动作

$(function () {
        document.getElementById("J-wrap").addEventListener('touchstart', touchStart);
        document.getElementById("J-wrap").addEventListener('touchmove', touchMove);
        document.getElementById("J-wrap").addEventListener('touchend', touchEnd);
    });

x y为点击的x y坐标，n为滑动的距离，no为图片的次序

var x = 0, y = 0, isMove = false, n = 0, no = 1;

刚开始点击的时候，获取点击的坐标

function touchStart(e) {
        isMove = true;
        x = e.touches[0].pageX;
        y = e.touches[0].pageY;
    }

在移动的过程中，计算滑动的距离

function touchMove(e) {
        if (Math.abs(e.touches[0].pageX - x)>(Math.abs(e.touches[0].pageY - y))){
            isMove = true;
            n = e.touches[0].pageX - x;
            e.preventDefault();
        }else{
            isMove = false;
            n = 0;
        }
    }

在滑动结束后，根据滑动距离的正负来判断是左滑还是右滑，使用animate函数制作图片滑动的动画，

function touchEnd(e) {
        if(n<=-10){
            isMove = false;
            if(no<7){
                $('#J-ul').animate({left:"-"+(no*16)+"rem"},400);
                no += 1;
            }
            n=0;
        }
        if(n>=10){
            isMove = false;
            if(no>1){
                $('#J-ul').animate({left:"-"+((no-2)*16)+"rem"},400);
                no-=1;
            }else if(no==1){
                $('#J-ul').animate({left:"-"+((no-1)*16)+"rem"},400);
            }
            n=0;
        }
    }