Как сделать резиновый размер шрифта в CSS?
Почти у каждого верстальщика возникал вопрос о том как сделать резиновый размер шрифта (не используя @media).
CSS3 имеет несколько новых вкусняшек для изменения размеров в зависимости от размера окна браузера.
Заинтересовал?
- 1vw = 1 % ширины окна,
- 1vh = 1 % от высоты окна,
- 1vmin = 1vw или 1vh , в зависимости от того меньше
- 1vmax = 1vw или 1vh , в зависимости от того , больше.
Использовать так
|
1
2
3
4
5
6
7
8
9
|
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
|
Поддержка браузерами:
IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ — поддерживаются
Chrome 20-34, Safari 6 — поддерживаются с оговорками.
Кстати об оговорках.
Под оговоркой подразумевается то, что в этих браузерах не работает изменение размера «на лету» (как на анимации выше), но тем не менее при перезагрузке страницы всё встанет на свои места.
И стоит не забывать о запасном варианте!
|
1
2
3
4
|
h1 {
font-size: 36px; /* на случай если браузер не поддерживается. */
font-size: 5.4vw;
}
|
Ну а для того, чтобы проверить свои браузеры вы можете воспользоваться следующим кусочком кода jQuery:
|
1
2
3
4
5
6
7
8
9
10
11
|
var testEl = $(«#vw-test»);
testEl.css({
width: «100vw»
});
if (testEl.width() == window.innerWidth) {
alert(«Ваш браузер поддерживает vw»);
} else {
alert(«Ваш браузер НЕ поддерживает vw»);
};
|