css - 字体大小视口(viewport)但具有最小大小或改为映射到容器

Question

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

要么需要最小字体大小之王，要么需要将字体大小映射到父元素的大小。不用JS能做到吗？

Answer 1

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

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