使用rem设置移动端页面尺寸

---

一、移动端的特点

• 设备尺寸不同；
• 可以通过设置百分比解决；
• 设置百分比计算繁琐。

二、单位概述

• px：像素；
• em：相对于 父级 的font-size值的几倍；
• rem：相对于 html标签 的font-size值的几倍。

em代码示例：

.em {
	font-size: 10px;
}
.em-box {
	width: 10em;
	height: 10em;
	background-color: red;
}

<div class="em">
	<div class="em-box"></div>
</div>

当父元素em的font-size为10px时：

.em {
	font-size: 10px;
}

当父元素em的font-size为30px时：

.em {
	font-size: 30px;
}

rem代码实例：

.rem {
	font-size: 10px;
}
.rem-box {
	width: 10rem;
	height: 10rem;
	background-color: yellow;
}

<div class="rem">
	<div class="rem-box"></div>
</div>

当父元素font-size为10px时，我们发现rem-box的大小与它无关。
html为默认font-size时：

html的font-size为20px时：

注意：html的font-size:20px时，1rem代表20px；10rem代表200px。

三、rem单位的应用

通过js文件，根据浏览器的视窗宽度设置html元素的fontsize值。

在meta标签后面link标签前面，嵌入script标签，js代码如下：

(function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;

        function setFont() {
            var html = document.documentElement;
            var k = 750;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }

        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);

若设计稿是750px，浏览器视窗为750px, 那么html的font-size为100px，则 100px = 1rem；
测量出100px，则设置为1rem；
测量出75px，则设置为0.75rem；
测量出750px，则设置为7.5rem。