8 (8452) 32-00-84

Responsive Text

Как сделать дружественный текст для резиновой верстки Bootstrap? Имеется в виду уменьшение или увеличение размер шрифта в зависимости от размера окна браузера.

Я использую два способа в комплексе.

vw вместо px

Использую только первый вариант, он логичнее и удобнее всего.

h1 {
	font-size: 1.2vw;
}
h3 {
	font-size: 3vh;
}
p {
	font-size: 2.2vmin;
}

Поддержка браузеров: Chrome 34+, IE 10+, Safari 7+, Firefox 19+, iOS 6, Android 4.4+

@media

Позволяет задать стили для разных размеров экрана и браузера. Например изменим цвет фона для body, если размер экрана 780px или шире.

@media screen and (min-width: 780px) {
    body {
        background-color: #f4f4f4;
    }
}

Комплексный подход

Тут история следующая:

Если размер экрана 768px или меньше устанавливаем размер шрифта в значение 5.3vw — % от ширины экрана.

Если размер экрана 768px и больше — 3.3vw.

992px и больше — 1.7vw.

1570px и больше — 1.5 vw.

@media (max-width: 768px) {
    #mobile {
        font-size: 5.3vw;
    }
}
@media (min-width: 768px) {
    #mobile {
        font-size: 3.3vw;
    }
}
@media (min-width: 992px) {
    #mobile {
        font-size: 1.7vw;
    }
}
@media (min-width: 1570px) {
#mobile {
        font-size: 1.5vw;
    }
}