Question

JSFIDDLE

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

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; }

当然它会阻止窗口大小调整到给定宽度以下，这一切都取决于你想要的。

当使用＆＃34; vw＆＃34;当容器停止收缩时，字体大小继续缩小用于尺寸指标。为什么？

2 个答案: