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

演示:http://jsfiddle.net/ckq04r5q/

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

CSS:

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

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