简介
在本实验中，我们将学习如何使用 CSS 实现流体排版。流体排版可确保文本根据视口宽度进行缩放，从而使其在不同屏幕尺寸下更具响应性和易读性。通过使用 clamp() 函数和一个公式来计算 font-size 的响应式值，我们可以创建一个更具动态性和用户友好性的设计。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 94%。获得了学习者 100% 的好评率。
流体排版
虚拟机中已经提供了 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 中练习更多实验来提升你的技能。