如何打造全平台自适应的动态响应式字体大小？

本文共计601个文字，预计阅读时间需要3分钟。

前言+该技巧是一个简单的响应式字体表示例。它将演示如何使用新的尺寸单位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。这虽然看起来非常简单，但是该方法可以多样化，基于此方法可以实现很多令人印象深刻的响应式字体效果。