Bootstrap 3响应h1标签

Question

我正在创建一个网站，并希望它具有响应性，所以我使用bootstrap 3。然而，隐私策略页面和关于页面上的h1标签在小型移动设备上从容器中出来，因为这个词太大了。有没有办法减小h1标签的大小，使其适合较小移动设备上的容器？如果有人想看我在说什么，这个网站就是muscadinewinerecipe.com。这是关于页面和隐私政策页面。

Answer 1

您可以使用以下命令：

CSS：

h1{
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     -o-hyphens: auto;
     hyphens: auto;
}

演示:

或者，如果你想要更好的浏览器兼容性，你可以把你的h1与id或class结合起来，用< 768px的媒体查询来减小字体大小

CSS：

@media screen and (max-width: 768px) {
    h1{
        font-size:14px;
    }
}

当屏幕宽度小于768px时，该属性将运行

Answer 2

我也遇到过同样的问题，我用jQuery解决了这个问题：

function resize() {
    var n = $("body").width() / 17 + "pt";
    $("h1").css('fontSize', n);
}
$(window).on("resize", resize);
$(document).ready(resize);

可以通过替换17值来调整比率，并且可以通过更改h1将其用于其他标记。

Answer 3

对于Boostrap 4，您可以使用我为自己创建的这个mixin集合-非常方便的一个https://github.com/Omi0/boostrap-mixins