rem 实现手机适配

px：
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1024768}，{1280768}，{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素宽度后者则是高度为1024个像素

em：
em的值并不是固定的；
em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px；

rem：
rem是css3中新增加的单位相对的只是HTML根元素，默认也是16px；通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应；

em跟rem有什么区别：
em是根据父元素继承相应大小而不是固定的
rem是继承html根元素的大小，只有改变根元素html的值才能改变rem的值，

如何使用rem：

    // 手机自适应
    var selfAdaption = function (doc, win) {
        // 根元素 html
        var docEl = doc.documentElement,
        // 判断窗口有没有 orientationchange 方法，有就赋值给一个变量，没有就返回resize方法。
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //这里是假设在375px宽度设计稿的情况下，1rem = 50px；
            //可以根据实际需要修改
            //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果
            docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
        };
        if (!doc.addEventListener) return;
        //addEventListener事件方法接受三个参数： 
        //第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔 
        win.addEventListener(resizeEvt, recalc, false);
        //绑定浏览器缩放与加载时间
        doc.addEventListener('DOMContentLoaded', recalc, false); 
    };
    selfAdaption(document, window);

设计比例为750*1334时,1rem等于100px

在HTML中需要在meta标签中添加viewport，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

参考大佬的简书：https://www.jianshu.com/p/a0bdd3e9133d