Язык CSS (Каскадные таблицы стилей) предназначен для оформления веб-страниц. В его рамках устанавливаются параметры, определяющие, как именно будет выглядеть элемент на сайте. Это включает в себя такие аспекты, как цвет фона, тип и размер шрифта, размеры блока и его расположение в отношении других компонентов страницы.
В CSS существуют различные единицы измерения для указания размеров и длины элементов – это px, em, rem, %, vw и vh. В данной статье рассмотрим каждую из них, их отличия и рекомендации по правильному применению.
В определенных ситуациях, вместо кастомизации размеров шрифтов на сайте, проще и быстрее подключить плагин для людей с нарушениями зрения на платформе WordPress.
Все вышеуказанные единицы измерения делятся на абсолютные и относительные. Абсолютные единицы, такие как px, представляют фиксированные размеры, тогда как относительные единицы, такие как em и rem, позволяют создавать адаптивные интерфейсы, которые могут изменяться в зависимости от предпочтений пользователя и размеров экранов.
Важно учитывать, что использование относительных единиц, таких как em и rem, повышает доступность и гибкость дизайна. Например, настройка размеров шрифтов в rem относительно корневого элемента позволяет легко изменять размер всей страницы при смене базового размера шрифта в настройках браузера.
Проценты (%) тоже являются полезным инструментом, особенно когда речь идет о размерах блоков и отступах, ведь они обеспечивают адаптацию дизайна к ширине родительского элемента. При использовании vw (viewport width) и vh (viewport height) можно задать размеры, основанные на размере видимого окна браузера, что особенно актуально для мобильных устройств.
Правильное комбинирование различных единиц измерения позволит создать максимально удобный и адаптивный интерфейс для пользователей, что является залогом успешного веб-дизайна.
Абсолютные
Пиксели (px) относятся к абсолютным единицам, хотя зависят от разрешения экрана и DPI устройства. На самом экране блок, измеряемый в px, остается неизменным и не зависит от других элементов. Изменение размеров с использованием px может вызвать трудности на адаптивных сайтах, однако они полезны для обеспечения единообразия в некоторых элементах.
Если размеры элементов фиксированные и не подлежат изменениям, px является оптимальным вариантом.
Кроме того, пиксели идеально подходят для графики и изображений, так как позволяют точно контролировать размер элементов без искажений. Тем не менее, для текстов рекомендуется использовать относительные единицы, такие как em или rem, чтобы обеспечить лучшую доступность и удобочитаемость на различных устройствах. Также стоит учитывать, что на различных экранах размеры в пикселях могут восприниматься по-разному, что является еще одной причиной для осторожного использования этой единицы измерения в веб-дизайне.
Относительные
- 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
Это позволяет адаптировать размер шрифта по умолчанию, сохраняя относительный масштаб каждого элемента, который вы указали.
Также стоит отметить, что использование относительных единиц может значительно упростить работу при разработке страниц с многоуровневой структурой, так как изменения в базовом размере автоматически масштабируют все элементы, которые от этого зависят. Это особенно важно, когда вы работаете с медиа-запросами, где необходимо адаптировать элементы под разные размеры экранов.
При работе с типографикой в CSS хорошей практикой является использование rem для задания размеров шрифтов, так как это позволяет избежать проблем с наследованием, которые могут возникнуть при использовании em в глубоких вложениях. В конечном итоге это сделает вашу верстку более предсказуемой и управляемой.
Кроме того, сочетание относительных единиц, таких как rem с абсолютными px, может быть полезным при задании фиксированных размеров для определенных элементов, например, для изображений или иконок, которые необходимо сохранить в неизменном размере.
В чем разница между em и rem?
На этом примере видно, что em и rem выглядят похожими. Но в чем их различия?
Основное различие между ними заключается в том, как они наследуют размеры. rem опирается на корневой элемент (HTML). Каждый дочерний элемент, использующий rem, будет вычислять свой размер относительно корневого HTML, игнорируя размеры, заданные для родительских элементов.
Em, с другой стороны, зависит от размера шрифта родителя. Если размер элемента, располагающего em, отличается от корневого, то расчет будет производиться исходя из родителя, а не корня. Это может привести к неожиданным размерам для вложенных элементов, использующих em, но, в то же время, предлагает больше контроля при формировании размера определенных зон страницы.
Также существует практическое применение этих единиц измерения. Использование rem часто рекомендовано для обеспечения согласованности и предсказуемости, особенно в больших проектах, где важно, чтобы изменения в корневом размере шрифта автоматически применялись ко всем дочерним элементам. Это позволяет легче управлять адаптивным дизайном и облегчает процесс изменения масштабов.
Em может быть полезен в случаях, когда необходимо создать сложные компоновки, которые должны изменяться в зависимости от общего размера шрифта родительского элемента. Например, в компонентах интерфейса, где различные элементы могут иметь разные контекстные размеры шрифтов, использование em позволит более гибко подстраивать размеры.
Важно отметить, что при работе с em и rem стоит учитывать, что они могут влиять на доступность вашего сайта. Использование rem может быть более удобным для пользователей, которые изменяют настройки масштабирования в браузере или операционной системе, так как это обеспечивает более предсказуемое поведение сайта при изменении размеров шрифта.
Подробнее о vw и vh
Единицы измерения области просмотра представляют собой процент от текущего окна браузера. Хотя они похожи на процентные единицы, их суть различается. Единицы viewport рассчитываются как процент от размера текущей области просмотра в браузере, тогда как процентные единицы зависят от размера родительского элемента, который может быть отличен от области просмотра.
Например, рассмотрим мобильный экран с размерами 480х800 пикселей.
- 1 vw = 1% ширины области просмотра (или 4.8px).
- 50 vw = 50% ширины области просмотра (или 240px).
- 1 vh = 1% высоты области просмотра (или 8px).
- 50 vh = 50% высоты области просмотра (или 400px).
Если размер области просмотра многоразово измениться, размер элемента соответственно будет адаптироваться.
Использование единиц vw и vh особенно актуально для создания отзывчивых дизайнов, так как позволяет адаптировать размеры и расстояния к различным устройствам и экранам. Например, использование 100vw для ширины блока позволит ему занимать всю ширину экрана, независимо от его размера или ориентации.
Важно помнить, что элементы, заданные с помощью vw и vh, могут вести себя непредсказуемо на некоторых устройствах с нестандартными пропорциями экрана. Поэтому всегда тестируйте свой сайт на нескольких устройствах для достижения оптимального результата.
Не забудьте сохранить в закладках таблицу цветов CSS, она очень удобна в использовании.