html - 使用“vw”作为大小度量时，当容器停止缩小时，字体大小会继续缩小。为什么？

Question

JSFIDDLE

我在一个容器中有 2 个文本框，其中有文本，其font-size属性已使用“vw”指标指定，其中大小与父容器大小成正比。当您缩小和放大容器时，字体大小会减小。但是，我min-width为文本框和容器指定了 a ，但字体大小继续减小，即使在父母停止缩小之后也是如此。有谁知道为什么会这样？

HTML：

<div class="container">
    <div class="textbox">
        <p>Lorem ipsum dolor sit amet</p>
    </div>

    <div class="textbox">
        <p>Lorem ipsum dolor sit amet</p>
    </div>

    <div style="clear:both"></div>
</div>

CSS：

.container{
    width: 80%;
    min-width: 850px;
    margin: 0px auto;
    background-color: #999999;
}

.textbox{
    float: left;
    width: 30%; 
    background-color: gray;
    margin: 0 4.9% 0 4.9%;
    padding: 0 4.9% 0 4.9%;
    min-width: 250px;
}

.textbox p{
    font-size: 2vw;
}

Answer 1

视口单元与其父级没有关系，而是直接缩放到浏览器窗口的大小。如果要保持文本与父元素的大小成比例，我建议在窗口调整到文本大小不可接受的点后，使用媒体查询重新排列布局或调整文本大小。

Answer 2

您可以使用以下方法限制视口最小尺寸：
@viewport { min-width: ##px; }

当然，它会阻止在给定宽度以下调整窗口大小，这完全取决于您想要什么。