Новые единицы измерения для отзывчивого дизайна

Размеры разрабатываемого дизайна сайта, которые зависят от ширины или высоты экрана, обычно задаются в процентном соотношении. Возможно, вы делали так со всеми своими сайтами, оптимизируя их размеры под планшеты и смартфоны. И не имеет значения, что за элементы находятся на странице (текстовые блоки, изображения) – все те элементы, которые должны подстраиваться под размеры экрана.

Но использование процентных значений не всегда лучший способ определить размеры по отношению к окну браузера. Примером может служить размер шрифта. Размер шрифта не может быть сделан так, чтобы реагировать на изменение ширины окна браузера, по крайней мере, не в процентах. Поэтому в CSS3 появились новые единицы измерения, которые помогают решить эту проблему.

Единицы измерения для адаптивного дизайна

Единицы измерения "vw" (view width) и "vh" (view height) определяют ширину и высоты относительно размера окна браузера.

div {
  width: 50vw;
  height: 100vh;
}

В этом примере элемент занимает 50% ширины и 100% высоты окна браузера. В то время как значения этих чисел в процентах зависят от ширины родительского элемента. В новых единицах возможно определить даже высоту по отношению к ширине и наоборот.

div {
  height: 50vw;
}

В этом примере высота элемента div будет равна 50% ширины окна браузера. Масштабирование ширины окна изменяет высоту элемента.

Универсальные размеры шрифтов должны соответствовать размерам экрана

Если при верстке сайтов вы хотите обеспечить правильное отображение шрифтов и хотите быть уверенными в том, что шрифты будут отображаться в приемлемых размерах не зависимо от устройства, на котором они отображаются. Особенно это касается заголовков, к которым должно быть уделено больше внимания, чтобы избежать проблем с их отображением.

h1 {
  font-size: 10vw;
}

В этом примере размер шрифта составляет 10% от ширины экрана браузера. Благодаря "vw", размер шрифта, предназначенный для h1 будет всегда подстраиваться под размеры окна браузера.

Размеры зависят от соотношения сторон экрана

Наряду со свойствами "vw" и "vh", существуют свойства "vmin" и "vmax". vmin определяет размер по отношению к ширине или высоте окна, в зависимости от того, какое значение является меньшим. Если ширина меньше высоты, то "vmin" будет зависеть от ширины. "vmax" работает наоборот – он зависит от большей ширины или высоты экрана.

div {
  width: 2vmin;
}

В этом примере, элемент div получает 20% ширины экрана пока ширина экрана меньше, чем высота.

Поддержка браузеров

Новые единицы измерения поддерживаются всеми популярными браузерами: Interner Explorer, начиная с 10-й версии; в Firefox добавлена поддержка с 19й версии, а в Chrome – с 20 версии. Так что можете смело внедрять новые возможности при создании своих сайтов.