rem单位的使用

1.对rem单位的简单认识：
rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。而根节点就是节点。

2.对rem单位的简单换算：
我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：
12px/16px=0.75rem
14px/16px=0.875rem
16px/16px=1rem
18px/16px=1.125rem
20px/16px=1.25rem
…
为了方便计算，时常将在元素中设置font-size值为62.5%:
相当于在中设置font-size为10px，此时，上面示例中所示的值将会改变：
12px/10px=1.2rem
14px/10px=1.4rem
16px/10px=1.6rem
18px/10px=1.8rem
20px/10px=2.0rem
…

3.对rem单位的运用：
以下是我自己在使用rem单位的时候常用的一种方法：

<script type="text/javascript">
	// <!--初始化rem-->
	! function(a) {
		function b() {
			var b = a.document,
				c = b.documentElement,
				d = c.getBoundingClientRect().width;
			document.documentElement.style.fontSize = 20 * (d / 360) + "px"
		}
		window.addEventListener("DOMContentLoaded", function() {
			b()
		}, !1), window.addEventListener("resize", function() {
			b()
		}), b()
	}(window);
</script>

使用说明：
这是通过js动态设置根节点的font-size大小，得到一个在不同屏幕大小下的一个不同的值，主要是通过这个值进行换算。
为了方便计算，设备宽度等于1800px的时候对应的font-size=100px。可以通过这个来计算设计图上面各个值对应的rem值,使用方法是把设计图的宽度调整为对应的1800px，这样设计图对应的字体大小等的取值/100=对应的rem单位值。例：字体大小为18px/100=0.18rem。

注：因为Chrome下字号低于12px失效哈，如果想设置小于12px的字号，Chrome也有解决方案，自己百度就好

4.设计图取值与rem的关系：
设计图(屏幕宽)：(把屏幕宽度调制的时候，会出现对应的值做除法)
设计图宽 ---------- 设计图取值/与设计图宽度一致时对应的根元素的font-size值
1800 ----------------------设计值/100px
750 ----------------------设计值/41.6667px