适配方案

/**
 * rem适配
 * 需要在页面上先写好
 * @author 屠佳伟 Mrprince 2019-12-29
 * @param  {[number]} num 宽度为多少rem. (默认为10)
 */
function remAdaptation(num = 10) {
    addEventListener('DOMContentLoaded', function () {
        var styleNode = document.createElement('style');
        styleNode.innerHTML = 'html{font-size: ' + (document.documentElement.clientWidth / num) + 'px !important;}';
        document.head.appendChild(styleNode);
    });
}

/**
 * viewport 适配
 * 需要提前在页面上写好
 * <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
 * 因为innerWidth等兼容性太差
 * 用viewport 适配后,1px 就是1物理像素
 * @author 屠佳伟 Mrprince 2019-12-29
 * @param  {[type]} targetWidth 设计图的宽度
 */
function viewportAdaptation(targetWidth) {
    let target = 750;
    let viewport = document.querySelector('meta[name=viewport]');
    let scale = document.documentElement.clientWidth / target;
    viewport.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;
}
/**
 * 1物理像素实现
 * rem 与原来相同
 * 1px 就是1物理像素
 * 保留完美视口
 * @author 屠佳伟 Mrprince 2019-12-29
 */
function remAndViewportAdaptation(num) {
    addEventListener('DOMContentLoaded', function () {
        let dpr = window.devicePixelRatio || 1;
        var styleNode = document.createElement('style');
        styleNode.innerHTML = 'html{font-size: ' + (document.documentElement.clientWidth * dpr / num) + 'px !important;}';
        document.head.appendChild(styleNode);
        let meta = document.querySelector('meta[name=viewport');
        meta.content = `width=device-width, initial-scale=${1 / dpr}, maximum-scale=${1 / dpr}, minimum-scale=${1 / dpr}, user-scalable=no`;
    });
}