css3学习--rem终极奥秘解析及css度量单位全解密
一.css度量单位
要想了解rem这个单位的原理以及使用方法，先来了解下css所有的度量单位。很多同学不太清楚的是，在 CSS 中长度单位又分为绝对长度和相对长度。
1.绝对长度
绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。
in 英寸
cm 厘米
mm 毫米
pt 磅
pc pica
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ,绝对长度在实际开发项目中较少使用。
2.相对长度
相对长度指的是依托其他类型的单位，同样也是五种。
em 与元素字号挂钩
ex 与元素字体的“x 高度”挂钩
rem 与根元素的字号挂钩
px 像素，与分辨率挂钩
% 相对另一值的百分比
大家平时写项目也大概能知道，em,px,和%在以往的项目的使用较频繁，而rem这个新增单位慢慢被越来越多的人使用。
3.下面我们使用一些以往常用的单位（em,px,和%）作为演示，只有了解它们的工作原理和机制，才能更好的理解rem的原理和机制。
（1）em 相对单位
//em 相对单位
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 2em;
}
解析：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很高。如代码所示，这个元素设置的font-size:为15培px,也就是这个元素的1em = 15px,那它的height为2 * 15px = 30px,关键点在于，使用em这个相对单位这里的em值只与本元素的font-size相关联,而rem这个相对单位是与根元素的font-size相关联，这个后面会细讲。
（2）px 相对单位，绝对特性
//px 相对单位，绝对特性
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 55px;
}
解析：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有 em 高，但是使用难度较低，且大量的开发者习惯性使用它。
（3）%百分比
//%百分比
p {
margin: 0;
padding: 0;
background: silver;
font-size: 200%;
width: 50%;
}
解析：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。
二.rem使用揭秘
rem的官方描述为为font size of the root element，之前说到过em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，也就是说，我们只需要在根元素确定一个font size值，这样就可以规避无法预知父元素font size值的风险，这就是之所以使用rem取代em的原因。
html {
font-size: 100px;
}
body {
font-size: 0.18rem; /*0.18 × 100px = 18px */
}
p {
margin: 0;
padding: 0;
background: silver;
height: 0.28rem; /*0.28 × 100px = 28px */;
width: 50%;
}
解析：如上述代码所示，设置根元素html的font-size为100px,如果想要给body的font-size设置为18px,演算的结果就是18px % 100px = 0.18 rem;同理想要给p元素的height设置为28px,便是28px % 100px = 0.28 rem。也就是说，
10px = 1rem 在根元素（font-size = 10px（62.5%）的时候）；·
100px = 1rem 在根元素（font-size = 100px（625%）的时候）；
40px = 1rem 在根元素（font-size = 40px（250%）的时候）；
注意： 因为chrome下最小字体大小为12px，所以不能把html的font-size设置成1px或者10px，推荐使用100px。
三.rem兼容性
rem毕竟是css3新的一个度量单位，支持的浏览器比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。不出所料IE6-8无法兼容的，所以rem的适用性很有局限，大部分场景用于只在移动端展示的页面。如果你的页面还需要适配到pc端，那么就老老实实的使用px吧。
如果只是用来放在移动端的页面，别人却在pc上打开了，因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。
html {
max-width: 580px;
min-height: 320px;
}
