Для стилизации веб-страниц используется язык таблицы стилей CSS. Именно в нем прописываются правила, как будет выглядеть блок на сайте. Например, цвет фона, тип, размер и начертания шрифта, размер блока, его позиционирование относительно других элементов страницы и т.п.
В CSS, для указания размера и длины элементов, используют различные единицы измерения – px, em, rem, %, vw и vh. В этом материале выясним, какими они бывают, различия между ними и советы по использованию.
В некоторых случаях вместо изменения размера шрифтов на сайте удобнее и быстрее установить плагин для слабовидящих на wordpress.
Все единицы бывают абсолютными и относительными.
Абсолютные
Пиксели (px) считаются абсолютными единицами измерения, хотя они относятся к DPI и разрешению устройства просмотра. Но на самом устройстве блок px закреплен и не меняется ни на каком другом элементе. Использование px может быть проблематичным для отзывчивых сайтов, но они полезны для поддержания согласованного размера некоторых элементов.
Если у вас есть элементы, размер которых нельзя изменять, то хорошим выбором будет использование px.
Относительные
- em – относительно родительского элемента;
- rem – относительно корневого элемента (тег HTML);
- % – относительно родительского элемента;
- vw – относительно ширины области просмотра;
- vh – относительно высоты области просмотра.
В отличие от px, относительные единицы, такие как %, em и rem, лучше подходят для адаптивного дизайна, а также помогают соответствовать стандартам доступности. Относительные единицы лучше масштабируются на разных устройствах, поскольку их можно увеличивать и уменьшать в соответствии с размером другого элемента.
Рассмотрим простой пример. В большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей. Относительные единицы рассчитывают размер на основе этой базы. Если вы измените базу, установив базовый размер для HTML-тега с помощью CSS, тогда он станет основой для вычисления относительных единиц на всей остальной странице. Аналогично, если пользователь изменяет размер шрифта, это становится основой для вычисления относительных единиц. Что означают эти единицы при работе со значением по умолчанию 16 пикселей? Указанное вами число умножит это число на размер по умолчанию.
- 1em = 16px (1 * 16)
- 2em = 32px (2 * 16)
- .5em = 8px (.5 * 16)
- 1rem = 16px
- 2rem = 32px
- .5rem = 8px
- 100% = 16px
- 200% = 32px
- 50% = 8px
Но что будет, если изменить размер по умолчанию? Поскольку это относительные единицы, окончательные значения размера будут основаны на новом базовом размере. Хотя значение по умолчанию составляет 16 пикселей, если изменить его на 14, тогда рассчитанные размеры будут такими:
- 1em = 14px (1 * 14)
- 2em = 28px (2 * 14)
- .5em = 7px (.5 * 14)
- 1rem = 14px
- 2rem = 28px
- .5rem = 7px
- 100% = 14px
- 200% = 28px
- 50% = 7px
Это дает возможность настраивать размер шрифта браузера по умолчанию, сохраняя при этом относительный масштаб каждого элемента, который вы указали.
В чем разница между em и rem?
На примере видно, что em и rem выглядят одинаково. Так чем же они отличаются?
Проще говоря, они различаются по наследству. rem основан на корневом элементе (HTML). Каждый дочерний элемент, который использует rem, будет затем использовать корневой размер HTML в качестве точки вычисления, независимо от того, заданы ли для родительского элемента какие-либо другие размеры.
em, с другой стороны, основан на размере шрифта родительского элемента. Если размер родительского элемента отличается от размера корневого элемента, расчет em будет основан на родительском элементе, а не на корневом. Это означает, что вложенные элементы, которые используют em для определения размеров, иногда могут иметь неожиданный размер. С другой стороны, он предоставляет больше контроля, если нужно указать размер определенной области страницы.
Подробнее о vw и vh
Единицы области просмотра представляют собой процент от текущего окна просмотра браузера (текущий размер браузера). Хотя это похоже на единицы измерения %, но есть разница. Единицы области просмотра рассчитываются как процент от текущего размера области просмотра браузера. С другой стороны, процентные единицы рассчитываются как процент от родительского элемента, который может отличаться от размера области просмотра.
Для примера рассмотрим область просмотра мобильного экрана размером 480×800 пикселей.
- 1 vw = 1% ширины области просмотра (или 4,8 px).
- 50 vw = 50% ширины области просмотра (или 240 px)
- 1 vh = 1% от высоты области просмотра (или 8 px).
- 50 vh = 50% высоты области просмотра (или 400 px).
Если размер области просмотра изменяется, размер элемента меняется соответственно.
Вдогонку сохраните себе в закладки таблицу цветов css. Она сделана максимально удобно.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
