Самые популярные единицы измерения css в web разработке и что они из себя представляют

Единиц измерения в вебе существует достаточно большое количество. Я же расскажу о тех, которые часто применяются в верстке.

Все единицы измерения в css можно разделить на абсолютные и относительные.

Абсолютные единицы измерения

Абсолютные единицы являются таковыми потому, что с помощью них задаются жесткие размеры элементам на странице. При этом фактические размеры не будут зависеть от контекста окружения — ширины, высоты экрана.

К абсолютным единицам относятся:

• Пиксели (px)
• Сантиметры (cm)
• Пункты (pt)
• Дюймы (in)

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

Каждый пиксель имеет определенные цвет и яркость. Цвет пикселя создается смешиванием трех цветов, но это другая тема.

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

Проще говоря, фактический размер элемента, равный 100px на телефоне и большом мониторе будет разный.  

Преимущества применения пикселей в верстке

Преимуществом является его простота в понимании и использовании. Для того, чтоб задать размер в px не потребуется проводить никакие вычисления, что реально сокращает время написания кода.

Недостатки применения пикселей

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

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

Отзывчивая верстка с помощью пикселей (px)

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

Под «отзывчивыми» элементами подразумеваются элементы, меняющие свои размеры в зависимости от воздействия на него другими элементами при изменении размеров экрана.

Достичь это можно применяя такие свойства как: max-width, min-width, max-heigt, min-heigh вместо width и heigh, которые задают жесткий размер.

Рассмотрим пример

С помощью html разметки создано два элемента с текстовым содержанием. Верхнему элементу (синего цвета) задана ширина 500px с помощью css свойства width.

Нижний элемент (красного цвета) имеет ширину аналогично верхнему 500px, но задана она при помощи css свойства max-width.

Высота обоих элементов определяется их содержимым. Для наглядности оба элемента помещены в контейнеры, окрашенные в цвет aqua фиксированной высотой 200px.

Из примера видно, что используя определенные свойства css можно использовать пиксели и добиваться отзывчивого поведения элементов на странице при изменении размеров экрана.

Относительные единицы измерения в css

Относительные единицы измерения — это единицы, величина которых зависят от контекста окружения элемента или общих настроек. Таким контекстом в основном служит изменения размеров экрана.

Браузер самостоятельно производит вычисления и преобразует относительные единицы в пиксели. В результате несмотря на то, что элементу были заданы размеры в относительных единицах в режиме разработчика мы всегда можем узнать размер элемента в px.

Проценты в css

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

При указании размера в процентах элемент будет занимать пространство, равное указанному значению от родительского элемента.

Например, элемент шириной width: 50%, находящийся в родительском html элементе шириной 300px по факту займет 150px ширины.

Как использовать проценты на практике

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

Несмотря на то, что для определения величины в процентах потребуется произвести некоторые вычисления это может сэкономить вам время.

Величину в процентах вычислить довольно просто и времени на расчеты много не понадобится, а вот медиа запросы писать не придется.

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

Относительные единицы измерения VW и VH

VW является аббревиатурой “viewport width”, что в переводе “ширина области просмотра”. Величина VW будет зависеть от ширины экрана, на котором отображена разметка, где 1vw будет равен 1% ширины области просмотра (экрана).

Например, на устройствах с шириной экрана 1000px 1vw будет равен 10px. Тогда как на смартфонах с шириной экрана 360px это значение буде равным 3,6px.

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

VH (viewport heght), что в переводе высота области просмотра. Является аналогией VW, где величина будет зависеть от высоты области просмотра. Размеры элемента будут реагировать на изменение высоты области просмотра.

Часто можно встретить ситуации, когда разработчики растягивают элемент на всю высоту экрана определяя для него значение высоты в 100vh.

Стоит учитывать при использовании vw и vh

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

И если в случаях с html элементами всегда есть возможность ограничить размеры с помощью функций max-width, min-width, max-height, min-height, то с размером текста могут быть неприятности. Ведь пользователь может просматривать страницу на большом экране, где размер шрифта будет слишком большим.

Для того, чтоб размеры изменялись относительно и при этом их размеры не выходили за рамки установленных существует удобная css функция clamp(), о которой я рассказал здесь.

VMIN и VMAX

За основу расчета размерности единиц измерения взят принцип описанных выше vw и vh. Отсюда схожесть в названиях, но в использовании разница все-таки есть.

Величина данных единиц измерения будет зависеть от соотношения сторон экрана. 1vmin будет равен 1% от меньшей стороны экрана.

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

VMAX рассчитывается аналогичным образом. По названию не трудно догадаться, что в отличие от VMIN за основу расчета будет взята большая из сторон.

Новые единицы измерения svh lvh dvh

В веб разработке не редко возникает необходимость задать высоту блока равной высоте экрана монитора. Так как разработчик не знает на каком экране будет просматриваться страница обычно указывается значение высоты 100vh. Эта относительная величина растянет блок на 100% высоты экрана в независимости от типа устройства.

Такой подход имеет существенный недостаток. Дело в том, что мобильные браузеры имеют плавающие элементы. Например, строка url, которая появляется при манипуляциях с сенсорным экраном в верхней или нижней части браузера, тем самым уменьшая видимую часть просмотра.

Так как появление плавающих элементов перекрывает часть контента, но какую высоту задавать для того, чтоб контент всегда оставался видимым? Подобные проблемы решаемы с помощью JavaScript, но это приведет усложнению и снижению производительности.

Именно для решения данной проблемы были внедрены единицы измерения svh, lvh и dvh.

Расчет размера производится по аналогии свыше рассмотренными vw и vh. Единица svh, lvh или dvh будет равна 1% от высоты экрана. Но при это есть отличие какая именно высота берется для расчета.

Svh является аббревиатурой от “small viewport height” что в переводе “малая высота окна просмотра”. 1svh будет равна 1% от высоты области просмотра при уменьшенном окне просмотра в результате показа навигационных элементов мобильного браузера.

Lvh является аббревиатурой от “large viewport height”, что в переводе “большая высота окна просмотра”. Размер будет высчитываться от максимальной высоты области просмотра. В данном случае задав элементу размер в 100% от высоты экрана с помощью значения 100lvh результат будет аналогичен значению 100vh.

Dvh (Dynamic viewport height), что в переводе “динамическая высота окна просмотра” является такой единицей измерения, которая объединяет в себе svh и ivh.

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

Масштабируемая единица EM

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

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

Для лучшего понимания рассмотрим простой пример, в котором создадим html разметку блока с заголовком и описанием.

<div class="box">

  <h2 class="title">Привет Мир!</h2>

  <p class="decription">

    Далеко-далеко за словесными горами в стране гласных и согласных.

  </p>

</div>

В данном примере элемент с классом box является родительским. Ему зададим размер шрифта со значением 20px.

Элементам, которые лежат внутри — заголовку и описанию укажем размеры шрифта в единицах em.

.box {

  font-size: 20px;

}

.title{

  font-size: 2em;

}

.decription {

  font-size: 1em;

}

В результате браузер сделает вычисления для заголовка: 20px * 2em = 40px; и для описания: 20px * 1em = 20px.

Единица измерения em наследуемая и не обязательно задавать базовый размер шрифта самому ближнему родительскому элементу. Степень вложенности не имеет никакого значения и базовую величину можно указать непосредственно body или корневому <html>.

Преимущества использования EM

Преимущества проявятся при адаптации страницы под мобильные устройства. Для смены размера шрифта сразу всех или одновременно нескольких текстовых элементов достаточно изменить посредством медиа запросов размер шрифта родителя.

Такой подход при адаптации значительно разгрузит код проекта, что скажется на производительности.

Недостатки использования EM

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

Допустим, у нас есть вложенные списки. Подобные html конструкции часто используются для создания выпадающего меню на сайте.

<ul class="menu">

        <li>Пункт меню</li>

        <li>

          Пункт меню

          <ul class="sub-menu">

            <li>Подпункт</li>

            <li>Подпункт</li>

            <li>Подпункт</li>

          </ul>

        </li>

      </ul>

Так как элемент <ul class=”menu”> является родительским элементом для всей обоих списков зададим ему размер шрифта, относительно которого будет вычисляться размер пунктов меню. Так же зададим самим пунктам меню размер в em.

.menu{

  font-size: 16px;

}

li{

  font-size: 1.4em;

}

Проблема здесь заключается в том, что вложенный список и все его элементы будут дочерними элементами для <li> первого уровня. Соответственно размер пунктов вложенного меню будет вычисляться не от размера шрифта общего родителя, а от ближайшего родителя, у которого размер уже был определен как 1.4em от 16px. Таким образом мы получим прогрессию. На экран выведутся списки, где пункты вложенного меню будут отличаться своим размером от пунктов меню первого уровня.

Единица измерения REM 2

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

Rem не наследуется, благодаря чему можно избежать ситуаций подобных рассмотренной выше.

Единица измерения углов deg

В css с помощью данной единицы задается угол наклона элемента. Deg полностью аналогичен всем знакомым из классических наук градусов.

Применяется в свойстве transform. При этом отрицательные значения будут разворачивать элемент против часовой стрелки.

transform: rotate(45deg);

Заключение

В статье были рассмотрены те единицы, которые часто используются в css на практике. Всего их существует гораздо больше. Но рассмотренных в статье более чем достаточно для создания качественной отзывчивой верстки.