CSS Bootstrap 3 响应式 h1 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25403510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 responsive h1 tag
提问by user2503303
I am creating a site and want it to be responsive so I am using bootstrap 3. However, the h1 tag on the privacy policy page and about page come out of the container on small mobile devices since the word is too large. Is there a way I can make the h1 tag reduce in size to fit in the container on smaller mobile devices ? The site is muscadinewinerecipe.com if anyone wants to view what I'm talking about. It's the about page and privacy policy page.
我正在创建一个站点并希望它具有响应性，所以我使用了引导程序 3。但是，隐私政策页面和关于页面上的 h1 标签在小型移动设备上从容器中出来，因为这个词太大了。有什么方法可以让 h1 标签减小尺寸以适合较小移动设备上的容器吗？如果有人想查看我在说什么，该站点是 muscadinewinerecipe.com。这是关于页面和隐私政策页面。
回答by Joffrey Maheo
You can use this :
你可以使用这个：
CSS :
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/
演示：http: //jsfiddle.net/ckq04r5q/
Or if you want more browser compatibiliy you can sibling your h1 with id or class and reduce font-size with media query on < 768px
或者，如果您想要更多的浏览器兼容性，您可以使用 id 或 class 与您的 h1 同级，并使用 < 768px 的媒体查询减小字体大小
CSS :
CSS :
@media screen and (max-width: 768px) {
h1{
font-size:14px;
}
}
When your screen as less to 768px of width the property has running
当您的屏幕宽度小于 768px 时，该属性已运行
回答by wirando
I've had the same problem, which I've solved with jQuery:
我遇到了同样的问题，我已经用 jQuery 解决了：
function resize() {
var n = $("body").width() / 17 + "pt";
$("h1").css('fontSize', n);
}
$(window).on("resize", resize);
$(document).ready(resize);
The ratio can be adjusted by replacing the value 17and it can be used for other tags by changing the h1.
可以通过替换值来调整比率17，并且可以通过更改h1.
回答by Timothy
For Boostrap 4 you can use this mixin collection which I created for myself - very handy one https://github.com/Omi0/boostrap-mixins
对于 Boostrap 4，您可以使用我为自己创建的这个 mixin 集合 - 非常方便的一个https://github.com/Omi0/boostrap-mixins
