h5项目自适应字体和宽高。用rem

已知：

1、浏览器默认的字号是16px，html｛font-size: 87.5%;｝（16*0.875 = 14px）。

2、css中的单位换算：rem 与 px 的换算为 px = rem * 设置的根节点字号。

3、注意，html 字体大小最小为 12px；如果设置为10px，则换算后的 px 依然按照 12px 计算

待搞清楚

 

 

思路：html的font-size设置为：网页宽度/设计稿宽度*10 px，css设置时就按照设计稿的大小，如宽为10px，css设置成1rem。这样，html的fong-size就相当于等比放大缩小的系数*10。

在网页加载完成后运行如下代码。designWidth是参考的设计稿的网页宽度（我的一般参考375px），maxWidth是设计稿的最大网页宽度，一般为750。运行该函数后，将设计稿的px对应成css的rem就好。比如设计稿中font-size:10px，css为font-size:1rem。

除此之外，在网页代码的头部，加入一行viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

 

 

//设置html的font-size

function resizeRem(designWidth, maxWidth) {

    var doc = document,

        win = window,

        docEl = doc.documentElement,

        remStyle = document.createElement("style"),

        tid;

    function refreshRem() {

        var width = docEl.getBoundingClientRect().width;

        maxWidth = maxWidth || 540;

        width > maxWidth && (width = maxWidth);

        var rem = width * 10 / designWidth;

        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

    }

    if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(remStyle);

    } else {

        var wrap = doc.createElement("div");

        wrap.appendChild(remStyle);

        doc.write(wrap.innerHTML);

        wrap = null;

    }

    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；

    refreshRem();

    win.addEventListener("resize", function () {

        clearTimeout(tid); //防止执行两次

        tid = setTimeout(refreshRem, 300);

    }, false);

    win.addEventListener("pageshow", function (e) {

        if (e.persisted) { // 浏览器后退的时候重新计算

            clearTimeout(tid);

            tid = setTimeout(refreshRem, 300);

        }

    }, false);

    if (doc.readyState === "complete") {

        doc.body.style.fontSize = "16px";

    } else {

        doc.addEventListener("DOMContentLoaded", function (e) {

            doc.body.style.fontSize = "16px";

        }, false);

    }

}