如何使用 CSS 创建响应式排版——三种不同方法详解
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
优秀的排版是网站的关键要素之一。让我们来看看使用 CSS 创建响应式排版的三种不同方法。
这三种方法分别是：
- 仅使用媒体查询实现响应式排版
- 使用CSS 自定义属性作为乘数实现响应式排版
- 使用CSS clamp() 函数实现响应式排版
简而言之：查看包含所有方法的最终 Codepen 示例。调整视口大小即可查看效果。
为什么要使用响应式排版？
网络用户使用各种尺寸的屏幕。您的网站必须能在手机、平板电脑、笔记本电脑、台式电脑以及基本上所有介于两者之间的设备上正常运行，因此有很多因素需要考虑。
以下所有方法示例都经过简化，仅涵盖三个选择器和一个断点。
您可以使用这段简单的HTML 代码来尝试本教程中的所有方法：
<h1>How to create responsive typography using CSS</h1>
<p>
Vestibulum molestie sapien eget orci pellentesque, et aliquam lectus convallis. Phasellus neque velit, ultricies ut lacus at, finibus lobortis dui. Proin eget diam elit.
</p>
<h2>Three different methods explained</h2>
<p>
Pellentesque sagittis nisl nec rhoncus porta. Quisque luctus turpis nec turpis consequat fermentum et vitae diam.
</p>
让我们开工吧！
方法一：仅使用媒体查询实现响应式排版
这是我们列出的方法中最基本的方法。
简单来说，只需声明文本样式，然后使用断点在大屏幕上增大字体大小即可：
/* Declare text styles */
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
}
/* Increase font sizes by 1.5x on bigger screens */
@media (min-width: 48rem) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}
p {
font-size: 1.5em;
}
}
请查看这个Codepen 示例的结果。调整视口大小即可查看效果。
使用这种方法完全没问题，而且效果非常好。
缺点是需要编写大量代码。每添加一个新的选择器，代码库就会变得更大。你必须为每个断点中的每个选择器单独编写样式。
在实际应用中，你可能需要用到文本选择器h1、h2、h3、h4、h5、h6、p以及至少两个断点。这样一来，代码行数就会从 20 行增加到 67 行，增加了3.35 倍。
下一个方法将展示如何减少代码量并使其更易于维护！
方法二：使用 CSS 自定义属性作为乘数实现响应式排版
CSS 自定义属性（变量）功能非常强大。在之前的方法中，我们每次只能手动调整一个选择器来增大字体大小。现在，我们将声明一个字体大小的倍增变量，并且只在断点处增加该倍增变量的值。
让我们完整地看一下代码示例，然后再进行分析：
/* Declare a font size multiplier variable */
:root {
--text-multiplier: 1;
}
/* Increase the size of the multiplier on bigger screens */
@media (min-width: 48rem) {
:root {
--text-multiplier: 1.5;
}
}
/* Declare text styles using calc() function and the multiplier */
h1 {
font-size: calc(2em * var(--text-multiplier));
}
h2 {
font-size: calc(1.5em * var(--text-multiplier));
}
p {
font-size: calc(1em * var(--text-multiplier));
}
请查看这个Codepen 示例的结果。调整视口大小即可查看效果。
第一步是声明一个变量，我们稍后将用它来控制字体大小。我们将默认值设置为1。
:root {
--text-multiplier: 1;
}
第二步是在断点处增加倍率值。与 SASS 变量不同，CSS 自定义属性可以在媒体查询中使用。
@media (min-width: 48rem) {
:root {
--text-multiplier: 1.5;
}
}
最后一步是声明字体大小，但这次我们使用calc() 函数，以便利用我们的乘数。
h1 {
font-size: calc(2em * var(--text-multiplier));
}
h2 {
font-size: calc(1.5em * var(--text-multiplier));
}
p {
font-size: calc(1em * var(--text-multiplier));
}
如您所见，我们只需要声明一次字体大小。与第一种方法相比，这是一个巨大的改进。
与第一种方法相比，我们只需要17 行代码，而第一种方法需要 20 行。如果我们再添加四个选择器和一个断点，代码也只会从 17 行增加到 34 行。请记住，使用第一种方法需要67 行代码，几乎是第二种方法的两倍。
代码量的减少得益于我们巧妙地运用CSS 自定义属性作为倍增器。添加另一个断点只需三行代码，因为我们完全无需修改字体大小。此外，代码的维护和修改也更加便捷。
添加断点非常简单：
/* Add more breakpoints */
@media (min-width: 64rem) {
--text-multiplier: 1.75;
}
@media (min-width: 80rem) {
--text-multiplier: 2.0;
}
对用户而言，这种方法看起来与第一种方法完全相同，但代码却好得多。
接下来，我们将了解一个新的 CSS clamp() 函数。
方法三：使用 CSS clamp() 函数实现响应式排版
clamp () 函数非常强大！您可以使用三个参数设置一个值：最小值、首选值和最大值。基本上，您可以获得一个三合一的值！
使用clamp() 函数实现响应式文本的示例声明如下所示：
font-size: clamp(2rem, 5vw, 3rem);
这使我们能够在不使用任何媒体查询的情况下创建响应式排版。只需一行代码，我们即可设置最小值（移动端）、最大值（桌面端）和首选值。
字体大小将保持动态，始终保持在最小值和最大值之间的首选值。非常强大！
要为我们的演示设置响应式排版，只需这样做：
/* Declare text styles */
h1, h2, p {
/* Font minimum, preferred and maximum value */
font-size: clamp(var(--min), var(--val), var(--max));
}
/* Font size variables */
h1 {
--min: 2em; /* minimum value */
--val: 5vw; /* preferred value = 5% viewport width */
--max: 3em; /* maximum value */
}
h2 {
--min: 1.5em; /* minimum value */
--val: 4vw; /* preferred value = 4% viewport width */
--max: 2.25em; /* maximum value */
}
p {
--min: 1em; /* minimum value */
--val: 2.5vw; /* preferred value = 2.5% viewport width */
--max: 1.5em; /* maximum value */
}
请查看这个Codepen 示例的结果。调整视口大小即可查看效果。
如果你查看代码，你会发现，通过使用CSS 自定义属性和 clamp() 函数，我们只需一行代码即可同时声明所有文本样式。
之后，我们只需为每个选择器设置--min、--val和--max自定义属性，就完成了！
CSS 自定义属性可以限定在选择器的作用域内，因此您可以像这里对h1、h2和p所做的那样，在多个选择器中使用相同的自定义属性。即使名称相同，这些自定义属性也不会冲突。
这种方法需要 18 行代码，如果再添加四个选择器和一个断点，则会有 38 行代码。因此，它比第二种方法略微复杂一些，但我们获得了流畅的排版效果。
注意：clamp() 函数是比较新的函数，因此您应该从caniuse.com检查它是否具有您需要的浏览器支持。
包起来
CSS 功能强大！
很多情况下，实现预期结果的方法不止一种。
如果你读到这里，非常感谢！希望你有所收获。
这是包含所有方法的最终Codepen 示例。调整视口大小即可查看效果。
谢谢🙏
希望这篇文章对您有所帮助 🔥
你可以在 Twitter 上关注我，获取更多关于CSS、设计系统和Figma 的内容 💪
文章来源：https://dev.to/laurilllll/how-to-create-responsive-typography-using-css- Three- different-methods-explained-50f8