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>