В CSS3 были добавлены новые относительные единицы измерения, такие как vh , vw , vmin , vmax . Эти единицы вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw , то он выйдет за пределы html.
Рис. 1. Полноэкранное фоновое изображение с шириной 100vw
IE: 9.0 кроме vmax, вместо vmin используйте vm
Edge: 12.0 кроме vmax, вместо vmin используйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0
Приёмы отзывчивого веб-дизайна базируются на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw . Например, если высота окна браузера равна 900px , то 1vh будет равен 9px . Аналогично, если ширина окна браузера равна 1600px , то 1vw будет равен 16px .
Так как ширина элемента, указанная с помощью 100vw больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100% , которая будет равна ширине корневого элемента html.
Fullscreen-bg {
background: url(image.jpg);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
}
Рис. 2. Адаптивно полноэкранное фоновое изображение
Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%; для трёх элементов — html, body и непосредственно для самого блока:
Html, body { height: 100%; } section { height: 100%; }
Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера:
Section { height: 100vh; }
Эффект перелистывания слайдов при клике на стрелку реализуется с помощью небольшого скрипта jQuery:
JQuery(document).ready(function($) { $("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("top")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos}, 600); }); });
Высоту, заданную с помощью vh также можно использовать для выравнивания элемента по центру страницы.
Единицы измерения CSS играют важную роль в создании сайтов и задании размеров различных элементов. Значения CSS могут быть выражены положительными или отрицательными числами, хотя некоторые свойства принимают только положительные числа. Числовое значение сопровождается двухбуквенной аббревиатурой, которая обозначает фактическую единицу длины. Например, cm (сантиметры ), px (пиксели ) или em CSS . Исключением из этого правила является значение 0 (ноль ), для которого не требуется указывать единицу измерения.
Единицы измерения CSS бывают двух типов: абсолютные и относительные.
Абсолютные единицы измерения CSS не подходят для веб-дизайна. Они представляют собой цифровое обозначение результатов измерений в физическом мире и не зависят от размера и разрешения экрана. Абсолютные длины с одним и тем же значением могут отличаться на разных экранах. Это вызвано различием DPI экрана (точек на дюйм ).
Экраны высокого разрешения имеют более высокий показатель DPI по сравнению с экранами меньшего разрешения, благодаря чему на них изображения и текст выглядят меньше. Абсолютные единицы используются при определении стилей в полиграфии, где измерения происходят в дюймах, пунктах и пиках.
Абсолютные единицы измерения длины:
Большинство абсолютных единиц длины бесполезны в интернете. Единственным исключением является px. Пиксели являются относительными единицами по отношению к разрешению экранов. Для принтеров и мониторов с очень высоким разрешением один пиксель в CSS равняется нескольким пикселям на экране, так что число px на дюйм составляет около 96. Пиксель является наименьшей единицей измерения и обычно используется в качестве ориентира для других.
Относительные единицы измерения длины в CSS не имеют фиксированных значений. Их значения зависят от других заданных значений или функций. Они более востребованы в веб-дизайне, потому что упрощают определение размера элемента. С их помощью можно задать ширину, высоту, размер шрифта и т. д. относительно других основных параметров.
Относительные единицы измерения, зависящие от шрифта, ссылаются на заранее установленный размер шрифта или значение свойства font-family :
Определяется как “высота символа x текущего шрифта ИЛИ половина 1 em ”. То есть высота строчной буквы x установленного шрифта. При изменении значения свойства font-family единица измерения ex изменяется.
Равна ширине символа 0 . Эта единица измерения также меняется при изменении значения свойства font-family .
Единица измерения em CSS имеет значение, равное размеру шрифта основного или родительского элемента. Например, если размер шрифта родительского элемента 30px , то значение 1em будет вычисляться как 30px (30 х 1 ) для всех дочерних элементов. Число не обязательно должно быть целым. Если в примере заменить 1em на 0,5, то значение будет 15px (30 х 0,5 ).
Единица измерения em принимает значение родительского тега. Это может привести к нежелательным результатам при использовании вложенных друг в друга элементов.
Допустим, что у нас есть три вложенных друг в друга элемента. Первый элемент (корневой ) имеет размер шрифта 30px , а два вложенных элемента — шрифт в 2em . Элемент, вложенный в корневой, будет иметь размер шрифта, вычисляемый как 60px (30 х 2 ). А элемент, вложенный в него, будет иметь размер шрифта, вычисляемый как 120px (60 х 2 ).
rem подобна em CSS , но ее значение всегда остается равным размеру шрифта корневого элемента. Единица измерения rem пригодится при разработке адаптивных сайтов, потому что позволяет масштабировать всю страницу, изменив размер шрифта в HTML-элементе .
Область просмотра основывается на ширине и высоте окна просмотра и включает в себя:
Это ширина области просмотра. 1vw равен 1/100 ширины окна просмотра. Немного похоже на проценты, за исключением того, что значение остается неизменным для всех элементов независимо от ширины их родительских элементов. Например, если ширина окна 1000px , то 1vw будет равен 10px .
То же самое, что и vw (ширина окна просмотра ), только данная единица измерения зависит от высоты области просмотра. 1vh равен 1/100 высоты просмотра. Например, если высота окна браузера 900px , то 1vh будет 9рх .
Vmin равно 1/100 от минимального значения между высотой и шириной области просмотра. Другими словами, 1/100 стороны с наименьшей длиной. Например, если размеры окна 1200 на 800 пикселей , то значение vmin будет равно 8px .
vmax равно 1/100 от максимального значения между высотой и шириной окна просмотра. Другими словами, 1/100 стороны с наибольшей длиной. Например, если размеры были 1200 на 800 пикселей , то vmax равно 12px .
Расстояние, заданное в процентах, зависит от длины родительского элемента. Например, если родительский элемент шириной 1000px , а его дочерний элемент — 50% от этого значения, то ширина дочернего элемента будет 500px .
поддерживаются во всех браузерах, в том числе и в старых версиях IE .
: vw , vh , и vmin . С недавних пор dev-версия Chrome (под номером 20) тоже поддерживает их , а это дарует некоторую надежду, что и разработчики других браузеров последуют этому примеру. На самом деле, это было бы кстати, ведь это очень удобно и практично, а я попробую рассказать, почему это так.
Много причин. Вот две из них:
Единица каждого из этих трех значений составляет 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:
Можно попробовать самому (убедитесь, что Ваш браузер поддерживает данные единицы измерения)
Поддержка есть в Chrome 20, но немного кривая. Когда окна браузера изменяется, шрифт не приспосабливается в соответствии с новым размером окна. Спецификация говорит:
Если высота или ширина окна изменится, они масштабируются соотвественно
Я отправил заявку в баг-трекер. Возможно, это не большая-то и проблема, шрифт все же изменяется на «чистой» загрузке страницы. Такие мелочи интересны только только нам, гикам в дизайне, которые тщательно относятся к таким вещам, но все-таки.
Чтобы устранить эту проблему (разрешить изменение размеров без перезагрузки страницы), Вам необходимо вызвать перерисовку элемента. Я использовал 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 пока еще нет теста для данной проверки, но вы можете проверить самостоятельно, используя небольшой скрипт на 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 . Правда он делает это через Javascript, математику, span-теги и еще кучу всего. Теоретически, Вы можете запустить проверку и использовать Modernizr.load для загрузки FitText.js, если поддержки не обнаружено.
В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом. eng ) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.
Часто в макете есть элементы, которые гарантировано должны умещаться во вьюпорт браузера. В общем случае для этого используется JavaScript. Проверям размер вьюпорта и изменяем размеры элементов соответствующим образом. Если пользователь изменяет размер окна браузера, то процедура повторяется.
С помощью vw/vh мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh интересны тем, что 1vw - единица равная 1/100"ой ширины вьюпорта. Что бы присвоить элементу ширину, равную ширине вьюпорта, например, надо установить width:100vw.
Можно использовать новые единицы измерения для установки размеров элементов, которые находятся в нормальном потоке. Например, я могу разместить на странице скриншоты. Высота этих скриншотов не должна превышать высоту вьюпорта. Для этого я могу установить максимальную высоту изображений:
Img { max-height:95vh; }
В данном случае я устанавливаю высоту 95vh что бы оставить немного места вокруг, когда они на экране.
В одной статье нет необходимости.
1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS - это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.
1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.
16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 8px * 2 = 16px // коричневый
1 rem = значению font-size (корневого элемента документа).
16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 16px * 2 = 32px // коричневый
1 процент (1%) — значение относительно значения свойства родительского тега.
16px * 100% = 16px // жёлтый 16px * 50% = 8px // зелёный 8px * 200% = 16px // коричневый
При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.
1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl - .
1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl - .
1vmin = 1vw или 1vh. Выбирается то, которое меньше.
1vmax = 1vw или 1vh. Выбирается то, которое больше.
font-size: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;
font-size: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;
font-size: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;
Никогда не хотелось от процентов вычесть пиксели или емы? Например, для того, чтобы . Теперь это возможно. Функция calc() позволяет реализовать математические выражения
Добавление (символ отделяется пробелами с двух сторон) - вычитание (символ отделяется пробелами с двух сторон) * умножение / деление
Вот ещё один зачётный пример, .
