html如何运用rem自适应

？如何使用rem

通常设计师提供的效果图都是指定宽度的效果，如750px等，因此可以在编写html时，一开始就设置整个dom文档html标签的font-size，假设设置的font-size为x，然后页面的其他元素便可以根据这个参照点，计算出大小并以rem作为单位。

？如何适配分辨率不同的设备

可以动态的改变上述中的x值，即可使得页面中设置了rem的元素大小对应变化。
因此可以在html文档中添加javascript脚本，动态设置x。相关代码：

;(function(win, doc) {
    'use strict';
    var options = { width: 750, dpr: win.devicePixelRatio };
    var html = doc.documentElement,
        width = html.getAttribute('data-width') || options.width,
        dpr = html.getAttribute('data-dpr') || options.dpr,
        viewPort = doc.querySelector('meta[name="viewport"]'),
        rotate = win.onorientationchange ? 'orientationchange' : 'resize';

    // 设置html fontSize
    function setSize() {
        var winWidth = win.innerWidth || html.clientWidth;
        html.style.fontSize = 100 * winWidth / width + 'px';
    };

    // 设置 initial-scale
    function setScale() {
        setSize();
        var viewContent = viewPort.getAttribute('content');
        var reg = /initial-scale=(\d(.\d+)?)/i;
        var matchRes = viewContent.match(reg);
        var scale = 1 / parseInt(dpr);
        if (matchRes && matchRes[1] == scale) {
            return;
        }
        var newContent = viewContent.replace(reg, function(a, b) {
            return a.replace(/\d(.\d+)?/i, scale);
        });
        viewPort.setAttribute('content', newContent);
    };
    
    win.addEventListener(rotate, setSize);
    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
    requestAnimationFrame(setScale);
}(window, document));

结束