css - 如何使 Bootstrap 3 按钮文本响应

Question

你能看看This Demo吗？让我知道如何让按钮内的文本响应按钮的大小？

<div class="container"><div class="well">
    <button type="button" class="btn btn-default btn-lg btn-block">Make Me Responsive!</button>
</div></div>

正如您从演示中看到的那样，按钮测试字体大小与调整窗口大小时的初始时间保持相同。你能告诉我如何在不使用 body 元素的情况下更新 id 吗？

谢谢，

Answer 1

虽然您可以使用 CSS @media 查询来获得结果，您也可以使用 vw Viewport-percentage长度，以便根据视口(viewport)的宽度指定 font-size:

EXAMPLE HERE

<button type="button" class="btn btn-default btn-lg btn-block responsive-width">
    Make Me Responsive!
</button>

.responsive-width {
    font-size: 3vw;
}

5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

vw unit
Equal to 1% of the width of the initial containing block.

值得注意的是vw unit is supported in the modern web browsers (包括 IE9+)。