Bootstrap 3响应h1标签 [英] Bootstrap 3 responsive h1 tag

问题描述

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

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.

推荐答案

您可以使用：

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/

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

或者如果您想要更多浏览器兼容性，您可以同时h1具有id或类并且减小字体大小， 768px

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

CSS：

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

当您的屏幕宽度小于768像素已运行

When your screen as less to 768px of width the property has running

这篇关于Bootstrap 3响应h1标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！