回顾上一篇文章“[实战]用Media Query实现响应式Web布局”，当涉及到页面框架实现响应式布局时，这里有一个问题：字体也可以吗？答：完全可以。
众所周知，现在只有几种常用的字体大小设置:px、em、pt、百分比、rem等。先看各单位之间的关系，如下图所示：
相信大家都很熟悉前四种，可能对rem不熟悉，因为它是CSS3新引进的设置字体大小的方法。以下是px、em、比较rem三种最常用的方法：
px单位：
px单位使用频率最高，比其他几种更稳定、更准确。缺陷太僵硬了，如果兄弟姐妹你近视，有一天忘记戴眼镜，想通过浏览器调整字体大小，很高兴告诉你：不工作，也就是说，不能达到字体响应，这个缺陷，特别是在移动端，小屏幕手机看起来更舒适，大屏幕手机预览页面字体不是很好。于是后来提出了“使用”em定义Web页面的字体。
em单位：
em单位的引进确实解决了一些问题，比px单位实用得多，但也存在缺陷。
em都是以<body>的“font-size”为基准。如果我们使用“1em”等于“10px”来改变“1em=16px”的默认值，我们设置font-size:1.2em相当于font-size:12px。
em 计算是基于父级元素的。如果设置了元素字体的大小，可能需要知道他的父级元素的大小。在复杂的页面上多次使用麻烦来了，鸡蛋疼痛，鸡蛋疼痛。
注：如果页面默认字体大小为16px，换句话说，当您没有设置任何字体时，字体大小为16px，这是主要浏览器[甚至IE6]约定的。Go on>>
疑惑：既然em和px有很多缺点，有木比它们好吗？
金无足赤，人无完人，没有更好，只有最好 No best, but better. There is nothing best but better，于是rem出现了。
单位：rem：
承载着页面仔的“梦想”，css3带着它的弟弟rem来了。让我们了解一下。
rem[font size of the root element]，它是相对于根元素的<html>，em是相对于父级元素，这意味着我们只需要在根元素中确定一个参考值，在页面上设置其他元素的字体时，暂时不考虑父级元素的大小。举个例子:
- html{font-size:62.5%; /* 10÷16=62.5% “1em”等于“10px”*/ }
- body{font-size:1.2rem ; /* 12÷10=1.2 */}
- p{font-size:1.4rem;}
这样，rem比em实用得多，但不要太快乐。众所周知，很多IE6/7/8不支持CSS3的东东，rem也不例外。如果我们想使用rem，我们必须设置更多的font-size以px为单位，如下：
- html{font-size:62.5%; /* 10÷16=62.5% “1em”等于“10px” */ }
- body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */ }
- p{font-size:14px;font-size:1.4rem;}
这两全其美。然而，必须补充的是，谷歌浏览器的最小字体大小为12px。请阅读之前写的一篇关于这个问题解决方案的文章：新谷歌（Chrome）设置字体大小问题
总结：
与PC相比，rem更多地应用于移动终端[Android和ios]，因此掌握这些知识仍然非常有用。起初，我混淆了字体的大小，并使用了错误的方法。今天的文章，我希望能帮助你，欢迎来嘲笑！！
