如何使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 视口百分比长度来指定font-size基于视口宽度的内容:

这里的例子

<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视口百分比长度:vw,vh,vmin,vmax单位

视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.但是,当根元素上的溢出值为auto时,假定不存在任何滚动条.请注意,初始包含块的大小受视口上滚动条的存在的影响.

vw单位
等于初始包含块宽度的1%.

值得注意的是,现代Web浏览器(包括IE9 +)支持该vw单元.