前言 该技巧是一个简单的响应式字体示例。它将演示如何使用新的尺寸单元REM。REM的意思是根EM（Root EM）。如果使用EM单元，意味着字体尺寸与根元素字体尺寸有关，而不是父元素字体
前言
该技巧是一个简单的响应式字体示例。它将演示如何使用新的尺寸单元REM。REM的意思是根EM（Root EM）。如果使用EM单元，意味着字体尺寸与根元素字体尺寸有关，而不是父元素字体。
准备工作
在进一步讨论之前，我们先看看这个技巧。先通过我最爱的Ipsum生成器（ipsum.com）生成一些用于填充的文本内容。至少生成一个段落文本并复制到剪贴板中。
实现方式
现在，将填充文本粘贴到HTML文档中并包装在一个段落标签中。设置该段落元素的类为a，然后再复制一份并将新段落元素的类改为b。如下面的代码片段所示：
接下来，创建HTML的基本font-size属性和静态尺寸段落的font-size样式，用来比较字体大小的改变，这有点像实验中的对照组：
然后创建两个@media查询，一个为orientation:portrait，另一个为orientation:landscape。在orientation:portrait媒介查询中，设置“a”类段落元素的font-size属性值为3rem。在orientation:landscape媒介查询中，设置“a”类段落的font-size属性值为1rem。
现在，将浏览器窗口从横向模式调整到纵向模式时，会看到第一个段落的字体大小与基本字体大小的比例从1:1变为了3:1。这虽然看起来非常简单，但是该方法可以多样化，基于此方法可以实现很多令人印象深刻的响应式字体效果。
工作原理
当浏览器发送请求时，CSS3的@media查询会基于视窗宽度返回不同的样式。随着视窗大小的改变会实时地加载或建立（重建）样式。虽然不会有太多的用户在浏览网站过程中频繁改变视窗大小，但是如何使得网站更好地适应不同浏览器窗口大小往往是一项费时的工作。