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