奇妙的css[2]-rem字号单位
有哪些单位
字体相对单位有：em、ex、ch、rem；视窗相对单位则包含：vw、vh、vmin、vmax几种。绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。
em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸
为何用rem：
其实不是为了页面能够响应式（响应式需要用媒体查询来改变页面布局和一些局部细节的大小）。
而是因为用户如果设置浏览器默认字体大小，来调节他的默认字号的话（比如老人想让他大一点），我们得让我们的网页字体可以随着这个设置来整体变化。
另外，W3C推荐使用em作为字体单位，但字体超过3层以上，推荐使用rem，这样计算起来更方便。
相对与绝对
我认为也并不能说rem是相对的，px就是绝对的。其实他们都是相对的，无法精确的说出他是事实上的几厘米，就算是px单位也是根据用户屏幕分辨率高低有区别的。
而从浏览器页面内部来讲，也可以说px，rem都是绝对的。因为我们一旦css编码完成，这个文字不管你用的em还是rem还是px，他的大小都固定了。
除非用户改变浏览器的默认设置（改变浏览器内部单个像素缩放程序，以及根元素的字体大小），否则我们都可以说px跟rem都是绝对不变的单位。
而响应式设计的话，我们需要根据媒体查询来改变某些元素的字体大小或者间距。所以响应式并不是通过rem实现的，rem跟px都仅仅是单位而已。 但rem由于可以通过媒体查询改变html根节点来直接调整整个页面文字，所以他更适合当做响应式设计的字体单位。
前端开发中常用px，em，rem作字体单位。
他们从严谨的角度讲，都是相对单位。 px相对于显示器分辨率(当然前提是浏览器视口跟显示器缩放比1:1且设备分辨率与视口比为1)，1px就是一个电脑分辨率的1像素。 rem是相对于html文档的html根元素节点的字号大小.em相对于当前操作的对象字体大小。
chrome(很多其他浏览器也是)的默认字号是16px。 一般页面使用rem和em单位时，为了方便，就把 html字号设置为62.5%，也就是16*62.5%， 是10px。这样，其他地方就很容易计算rem单位了。
比如：你对一个p标签设置font-size:1.2em，那么这个p标签默认的字体大小是多少，那结果就是 m*1.2. 但是呢，p标签的默认字体大小是从父级继承来的，如果p标签的父标签你设置了font-size: 10px; 那么p标签计算出来就是：10px乘以1.2. 当父级也没有设置的时候，就从body甚至html继承而来，也就是说html字号为16px*62.5%, 那么你设置的这个p元素的字号就是16px乘以62.5%再乘以1.2.，也是12px。
可见，em单位的话，由于要找父元素来确定当前元素的默认字体大小，再计算。 开发人员就不容易进行设置。所以，出现了rem，直接以根html节点字号为准进行计算多方便。
2017-07更新，而我在mdn上查看文档时，文档中建议了使用px或者em作为单位，而文档中甚至建议将body设置为10px从而方便去计算其他元素的em大小，然而我感觉rem岂不是更容易计算吗，因为他是相对于html的，而em总是要思考其当前父元素已经被修改为多大了。
兼容情况
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。1
2
3p {
font-size:14px; font-size:.875rem;
}
另外：
IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem；
IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem。
最佳实践
1. 尽量使用相对尺寸单位
使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小，同时它也能更好的适应与多中分辨率和屏幕终端。采用相对定位，并不意味着页面整体的自适应。
当然，对于希望整体网站的“响应式设计”，适应当今层出不穷的的各类访问终端，相对尺寸布局将发挥更大的价值。我们仅需要利用CSS3的@media查询来设置外围的整体宽度，以及少量在设备上不一致的用户体验。关于“响应式布局”，可以更多的参考bootstrap这类新兴的CSS框架。
对于相对尺寸单位的设置：em和%因为它们相对的参考物不同，所以它们也有不同的使用场景。如果希望随着当前元素的字体尺寸而改变尺寸，则使用em最佳，如：行高、字体大小。相反，如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。
2. 只在可预知的元素上使用绝对尺寸
并不是所有的元素设置相对尺寸就是最佳的。对于如图表icon、如video这类多媒体元素、网页整体的宽度这类可预知尺寸，设置为绝对路径可能反而是最佳的选择。但他们需要试具体场景而定，从而获得最佳体验。不管我们如此设置相对尺寸，但在外层也总会有一些绝对尺寸度量，才可能存在百分比这类相对尺寸设置。
3. 字体尺寸尽量使用em、rem
和尽量使用相对尺寸单位一样，为了字体大小的可维护性和伸缩性，W3C更推荐使用em作为字体尺寸单位。需要注意的是，如果存在3层以及3层以上的字体相对尺寸的设置，则对于实际字体大小的计算，就会变得相对麻烦。这个时候，在满足浏览器兼容性的情况下，可以考虑使用CSS3的新特性rem：根据固定根元素的字体大小来设置相对尺寸大小，这也是近几年移动APP所兴起的使用方式。
rem的兼容性，我们可以用Can I Use网站获取。
4. @media查询做平台适配，但禁止随处滥用
如上所说CSS3的@media查询，能帮助我们做到多平台终端的自适应布局，得到一个更好的用户体验。但这绝不意味着我们可以随处滥用它，在CSS代码中存在太多的平台差异的代码，这也会增加代码可读性、维护性的难度。更好的方式则是仅在必须使用它的场景下，合理的使用它，如页面外围的整体宽度，不同显示的菜单栏等。更多的体验适应性，可以移动到使用“流式布局”来实现。
关于响应式设计，这是对开发周期、成本和平台体验的一个权衡的结果。如果不考虑开发、维护的成本，则为不同平台终端提供不同的页面设计，这样得到的用户体验会更友好。但在实际开发中，开发和维护成本、产品生命周期也是一个重要的权衡标准，而响应式设计则是它们之间的权衡结果。
参考与声明
本文仅是我的理解，如有错误欢迎指正。
http://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html