html5 适配机型 rem方案

rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

html {
    font-size: 16px;
}

以上代码等同于 1em = 16px

比如设置文字大小为 font-size=1rem

当

html {
         font-size: 16px;
     }

和

   html {
            font-size: 32px;
        }

同样设置font-size=1rem 字体的大小是不同的

对应 font-size=16px 和font-size=32px 字体大小也表现不同

大屏幕显示大字小屏幕显示小字

解决方案动态改变各元素字体大小就能实现

写一段js监听屏幕大小变化动态的计算，设置根元素字体大小(下面js的意思在宽度为750px 的设备上设置根元素文字大小为100px 即：1rem=100px)

<html>
<body>
    <p class="box">111111111111111</p>
</body>
 
<!--
     定义自执行函数  作用是根据屏幕 动态计算html{font-size=?px} 
     html.offsetWidth: 获取html宽度  相当于屏幕宽度  当宽度为750px时  html {font-size:100px}
-->
<script type="text/javascript">
    window.onload = function() {
        var html = document.querySelector("html");
        // html的font-size的大小尺寸
        // 这里的html字体大小利用了一个简单的数学公式，当我们默认设置屏幕为750px位基准此时的字体大小为20px
        // (320px 20px),那么浏览器窗口大小改变的时候新的html的font-size(clientWidth 新的值)
        console.log("offsetWidth=" + html.offsetWidth);
        console.log(html.offsetWidth / 750 * 100 + "px");
        html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
        // 当窗口发生改变时执行
        addEventListener("resize", function() {
            html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
        }, false);
    }
</script>
 
</html>