使用 CSS 实现响应式流体排版

简介

在本实验中，我们将学习如何使用 CSS 实现流体排版。流体排版可确保文本根据视口宽度进行缩放，从而使其在不同屏幕尺寸下更具响应性和易读性。通过使用 clamp() 函数和一个公式来计算 font-size 的响应式值，我们可以创建一个更具动态性和用户友好性的设计。

Skills Graph

流体排版

虚拟机中已经提供了 index.html 和 style.css。

要创建根据视口宽度调整大小的文本，你可以使用 CSS。一种方法是使用 clamp() 函数来设置最小和最大字体大小。另一种方法是使用公式来计算字体大小的响应式值。以下是一个具有 fluid-type 类的 HTML 元素示例：

<p class="fluid-type">Hello World!</p>

以下是相应的 CSS 代码，它根据视口宽度将字体大小设置为在 1rem 和 3rem 之间调整：

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了流体排版实验。你可以在 LabEx 中练习更多实验来提升你的技能。