使用 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);

在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