您想与他人分享什么 CSS 技巧？

CSS 的世界非常纷乱。让我们互相帮助，分享一些规则，让世界更加有序！

我先开始了！

您可以使用流体排版来摆脱媒体查询，从而动态更改字体大小。通过使用min、max和viewport units，我们可以动态更改font-size和 约束，使它们不会爆炸（或缩小）。

让我们看一个例子。假设你希望你的标题在移动设备上是 2rem，在更大的屏幕上是 4rem。以下是使用流体排版来实现这一点的方法：

h1 {
    // font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE});
    font-size: min(max(2rem, 4vw), 4rem);
}

大多数情况下，1rem = 16px，所以我们的最小字体大小是 32px。这意味着，当视口宽度小于 800px（0.04 * 800px = 32px）时，我们的字体大小始终为 32px。这对于移动设备来说非常理想。当视口宽度大于 800px 时，我们的字体大小会随视口动态变化，但不会超过 4rem = 64px。

4vw这只是一个例子。您可以将其更改为适合您需要的任何值。

要查看实际效果，请尝试更改下方画笔的视口宽度。我将其更改4vw为8vw使字体大小增加得更快（字体大小加速？！）：

就这样！只需一行代码，就能让字体大小自适应！

希望这个简单的技巧能帮到你们。欢迎
在下方分享其他精彩技巧！🎉