Question

如何使用bootstrap重新缩放文本？（实际上是一个h2）问题是标题已经开箱即用。这是css框代码：

.buton{
    padding-top:50px;
    padding-bottom:50px;
    border:2px solid #E3A739;
    border-radius:10px;
    margin-top:3em;
    margin-bottom:3em;
}

这是HTML代码：

<div class="row">
                    <div id="iteme" class="buton col-xs-3 col-md-3 col-lg-3">
                        <h2>Iteme</h2>
                    </div>
                  .....

如何在调整页面大小时调整标题大小？（我想让网站响应）

Answer 1

您可以使用vw而不是px：

.buton h2{
    font-size:3vw;
}

您应该根据需要更改变量，并且您也可以使用它进行媒体查询，因为在小型设备中，它可能会变为不可见的实际值（3vw），因此您可以为小型设备更改它要有更大的价值。

您可以在此处查看视口单元的浏览器支持：CanIUseIt

我希望这会有所帮助。

Answer 2

我在很多网站上看到的是他们使用：

font-size: 100%;

在他们的文本元素上，这使得它在其父元素内缩放。有时它可以工作有时它可以变得如此之小，在电话上几乎无法读取。另一种选择是使用媒体查询。

Answer 3

您可以做的是查看媒体查询，找出页面需要编辑的宽度或高度。

在这里寻求帮助：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 4

h2{
  font-size:2rem;
}

rems are awesome!

Answer 5

您可以使用vh, vw, vmin and vmax单位根据视口大小调整文本大小。

例如

h2 {
  font-size:4vh;
}

会将H2的文本调整为视口高度的4％。

我已经放了example JSFiddle here

Answer 6

Bootstrap使用类似的媒体查询。

@media (min-width: 768px) {
    h2 {
        font-size: 14px;
    }
}
@media (min-width: 992px) {
    h2 {
        font-size: 16px;
    }
}
@media (min-width: 1200px) {
    h2 {
        font-size: 18px;
    }
}

使用引导程序调整大小时重新调整文本

6 个答案: