屏幕适配

须知 rem 物理像素和逻辑像素的区别和联系

在还原设计图时，使用media＋rem进行适配，优点是简单粗暴。只需要考虑屏幕宽度即可，列出占有率高的屏幕尺寸就可以满足一般需求，性价比较高。但是这种方式不会关注屏幕的dpr，对于想要进行细化的问题就需要将所有情况列出来，显得不是和人性化。后来想到可以利用js加载时动态改变页面的font－size大小，利用屏幕的dpr进行更加灵活的适配：

function adapterRem() {

    var dpr, rem, scale;

    var docEl = document.documentElement;

    var fontEl = document.createElement("style");

    var metaEl = document.querySelector('meta[name=viewport]');

    dpr = window.devicePixelRatio || 1;

    rem = docEl.clientWidth * dpr / 75;

    scale = 1 / dpr;

    metaEl.setAttribute('content', 'width=' + docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

    docEl.setAttribute('data-dpr', dpr);

    docEl.firstElementChild.appendChild(fontEl);

    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

}