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

DEMO：http://jsfiddle.net/ckq04r5q/

或者，如果您想要更多的浏览器兼容性，您可以使用id或class来同化您的h1，并使用＆lt;上的媒体查询减少字体大小。 768px

CSS：

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

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

Answer 2

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

printf("enter the filename :");
scanf("%s%*c",filename);

可以通过替换值function resize() { var n = $("body").width() / 17 + "pt"; $("h1").css('fontSize', n); } $(window).on("resize", resize); $(document).ready(resize);来调整比率，并通过更改17将其用于其他标记。

Answer 3

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

Bootstrap 3响应式h1标签

3 个答案: