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/

或者,如果您想要更多的浏览器兼容性,您可以使用id或类同步你的h1并使用<768px上的媒体查询减少字体大小

CSS:

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

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