- PVSM.RU - https://www.pvsm.ru -
CSS3 привнесло в нашу жизнь новые единицы измерения [1]: vw
, vh
, и vmin
. С недавних пор dev-версия Chrome (под номером 20) тоже поддерживает их [2], а это дарует некоторую надежду, что и разработчики других браузеров последуют этому примеру. На самом деле, это было бы кстати, ведь это очень удобно и практично, а я попробую рассказать, почему это так.
Много причин. Вот две из них:
Единица каждого из этих трех значений составляет 1% от размера экрана. Например, если размер экрана составляет 40 сантиметров по ширине, то 1vw равен 0.4 см.
1vw = 1% ширины окна
1vh = 1% высоты окна
1vmin = 1vw или 1vh, в зависимости от того, что меньше
О, это очень просто:
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Chrome 20+ и IE 10+
Я проверял в Opera Next (12), Safari 5.2 и Firefox Beta (13) — безрезультатно.
Небольшое видео, в котором показывается использование vw
:
Тут [4] можно попробовать самому (убедитесь, что Ваш браузер поддерживает данные единицы измерения)
Поддержка есть в Chrome 20, но немного кривая. Когда окна браузера изменяется, шрифт не приспосабливается в соответствии с новым размером окна. Спецификация говорит:
Если высота или ширина окна изменится, они масштабируются соотвественно
Я отправил заявку [5] в баг-трекер. Возможно, это не большая-то и проблема, шрифт все же изменяется на «чистой» загрузке страницы. Такие мелочи интересны только только нам, гикам в дизайне, которые тщательно относятся к таким вещам, но все-таки.
Чтобы устранить эту проблему (разрешить изменение размеров без перезагрузки страницы), Вам необходимо вызвать перерисовку элемента. Я использовал jQuery и просто поэкспериментировал с z-index
значениями каждого элемента, который вызывает перерисовку.
causeRepaintsOn = $( "h1, h2, h3, p" );
$( window ).resize( function( ) {
causeRepaintsOn.css( "z-index", 1 );
});
Между прочим, это всего лишь единицы. Как em
, px
, что угодно. Вы можете их использовать повсеместно, дело не ограничивается только размером шрифта.
Не забудьте оставить callback для тех браузеров, которые пока еще не поддерживают данные единицы:
h1 {
font-size: 36px;
font-size: 5.4vw;
}
У Modernizr [6] пока [7] еще нет теста для данной проверки, но вы можете проверить самостоятельно, используя небольшой скрипт на JS.
var testEl = $( "#vw-test" );
var viewport = $( window );
testEl.css( {
width: "100vw"
} );
if ( testEl.width( ) == viewport.width( ) ) {
$( "html" ).addClass( "vw-support" );
} else {
$( "html" ).append( "vw-unsupported" );
};
Эта идея заключается в том, что связывает общую ширину заголовка с шириной родительского элемента, что и делает FitText.js [8]. Правда он делает это через Javascript, математику, span-теги и еще кучу всего. Теоретически, Вы можете запустить проверку и использовать Modernizr.load [9] для загрузки FitText.js, если поддержки не обнаружено.
Автор: theaqua
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/6976
Ссылки в тексте:
[1] новые единицы измерения: http://dev.w3.org/csswg/css3-values/#viewport-relative-lengths
[2] тоже поддерживает их: http://habrahabr.ru/post/143105/
[3] одном: http://trentwalton.com/2011/05/10/fit-to-scale/
[4] Тут: http://css-tricks.com/examples/ViewportTypography/
[5] заявку: http://code.google.com/p/chromium/issues/detail?id=124331
[6] Modernizr: http://modernizr.com/
[7] пока: https://github.com/Modernizr/Modernizr/issues/572
[8] FitText.js: http://fittextjs.com/
[9] Modernizr.load: http://modernizr.com/docs/#load
Нажмите здесь для печати.