H5 rem适配

定义rem转换函数 rem.js

function adapt(designWidth, rem2px) {

    var d = window.document.createElement('div');

    d.style.width = '1rem';

    d.style.display = "none";

    var head = window.document.getElementsByTagName('head')[0];

    head.appendChild(d);

    var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));

    d.remove();

    document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';

    var st = document.createElement('style');

    var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";

    var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"

    st.innerHTML = portrait + landscape;

    head.appendChild(st);

    return defaultFontSize

};

var defaultFontSize = adapt(750, 100);

 

页面中引入rem.js

按照UI图的比例px缩小100,即为rem