css - 字体大小视口，但具有最小大小或映射到容器

Question

一些代码根据视口调整字体大小。这就是我在身体有最小宽度之后的样子。一旦超过这个最小宽度，文本的视口缩放将如何停止。

要么需要一些最小字体大小，要么需要将字体大小映射到父元素的大小。这可以在没有 JS 的情况下完成吗？

Answer 1

当视口低于特定宽度时，在您的 css 中使用媒体查询设置固定字体大小：

BODY {min-width: 500px;}
P {font-size: 2vw;}
@media screen and (max-width: 500px) {
    P {font-size: 10px;}
}