古老的rem适配方案

0.前言

这个方案是我2015年2月用的方案。
那时vw方案因为兼容性问题而不能适用。
写此文就是为了纪念下。

1.切图的时候按照视觉稿自身分辨率来切

2.加上如下JS代码

(function (doc, win, ideaWidth) {
    // 分辨率Resolution适配
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            docEl.style.fontSize = 100 * (clientWidth / ideaWidth) + 'px';
        };


    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

    // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
    (function () {
        // return;
        var dpr = scale = 1;
        var devicePixelRatio = win.devicePixelRatio;

        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3) {
            dpr = 3;
        } else if (devicePixelRatio >= 2) {
            dpr = 2;
        } else {
            dpr = 1;
        }

        scale = 1 / dpr;

        // 插入meta标签
        var metaEl = "";
        metaEl = doc.createElement('meta');

        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        docEl.firstElementChild.appendChild(metaEl);

    })();

})(document, window, 750);
// 这里的750，是因为视觉稿分辨率宽为750。以你的视觉稿分辨率为准

3.为rem设定一个基准值

此时，0.01rem就相当于1px。