Bootstrap 3 отзывчивый h1 тег

Я создаю сайт и хочу, чтобы он был отзывчивым, поэтому я использую bootstrap 3. Однако тег h1 на странице политики конфиденциальности и о странице выходит из контейнера на небольших мобильных устройствах, поскольку слово слишком велико. Есть ли способ, с помощью которого я могу уменьшить размер тега h1 в контейнере на небольших мобильных устройствах? На сайте есть muscadinewinerecipe.com, если кто-то хочет посмотреть, о чем я говорю. Это страница о странице и политике конфиденциальности.

Ответ 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/

Или, если вы хотите больше совместимости с браузером, вы можете перевести свой h1 с идентификатором или классом и уменьшить размер шрифта с помощью медиа-запроса на < 768px

CSS:

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

Когда ваш экран меньше, чем 768 пикселей ширины, свойство имеет

Ответ 2

У меня была та же проблема, которую я решил с помощью jQuery:

function resize() {
    var n = $("body").width() / 17 + "pt";
    $("h1").css('fontSize', n);
}
$(window).on("resize", resize);
$(document).ready(resize);

Отношение можно отрегулировать, заменив значение 17, и его можно использовать для других тегов, изменив h1.