В CSS-правилах используется два варианта единиц измерения: абсолютные и относительные. Изначально была известна лишь одна абсолютная единица измерения – пиксель. Ее размер зависел от матрицы или монитора, и его было легко рассчитать самостоятельно.
Недостатки использования пикселей
Для верстальщиков, работающих на СМИ, на странице важно выделить именно контент. Он должен быть удобным для чтения, с оптимальной длиной строки и достаточного размера, чтобы даже пользователю с низким зрением было удобно воспринимать текст. Неважно, с какого устройства пользователь читает статью и насколько у него хорошее зрение – ему важно понять содержание статьи без специальных приспособлений. При использовании пикселей в верстке увеличение масштаба часто приводит к тому, что количество слов в строке уменьшается, появляются некрасивые переносы текста или же контент вовсе выпадает из контейнера. Поэтому веб-разработчики и дизайнеры начали использовать при написании кода проценты и относительные единицы измерения, такие как EM, REM. Но они до сих пор не смогли полностью вытеснить пиксели.
Вам будет интересно:Как включить "Флеш Плеер": советы и инструкции
Вам будет интересно:Как можно обновить Shockwave Flash: советы и рекомендации
История появления относительных единиц
Так как изначально страницы в большинстве браузеров не масштабировались, пиксели долго оставались единственным вариантом описания размеров шрифтов. Но с развитием веб-технологий появилась необходимость в создании новых единиц измерения. Так появились EM и %, а затем и REM, значения которых были привязаны к стандартам браузера и обычно равнялись 16 пикселям. Существует эмпирическое правило, объединяющее базовые размеры шрифтов: 100 % = 1 em ~ 16px ~ 14pt. Это означает, что, если не изменить размер шрифта в каких-либо дочерних элементах, по умолчанию в браузере он будет составлять около 16 пикселей и примерно 14пт (типографского пункта), но всегда 100 % и 1 EM.
Применение относительных единиц измерения облегчило верстку, сделав модульные элементы более управляемыми. Современная техника требует, чтобы при масштабировании элементы на страницах менялись в размерах в зависимости от разрешения экрана или браузера пользователя. Потому EM и REM в CSS стали незаменимым помощником для создания сайтов, где требуются адаптивные размеров шрифтов. Сейчас большинство браузеров не испытывают проблем при масштабировании текста, а их поведение при увеличении или уменьшении размера шрифта согласовано между собой. Но любой макет следует проверять в нескольких браузеров, в том числе и в устаревших, чтобы понять, как будет выглядеть конечный результат для различных пользователей.
Вам будет интересно:Портативный браузер: использование и создание
Использование относительных единиц
Относительные единицы измерения, которые так распространены в типографике и CSS, – EM и REM – пока что менее известны рядовым пользователям, чем пиксели. Не каждый начинающий дизайнер или верстальщик понимает их назначение и использует правильно. Между профессиональными дизайнерами до сих пор ведутся споры, когда лучше использовать ту или иную единицу. Тем не менее относительные единицы значительно облегчают отзывчивую верстку и считаются наиболее эффективным методом при построении модульных компонентов. EM и REM применяются, чтобы задать размер различным элементам – заголовкам, границам, рамкам. Но их размеры высчитываются по-разному.
Что такое EM
EM – это относительная единица измерения, которая зависит от размера шрифта родительского элемента. Чаще всего его прописывают в правиле CSS для тега body. В этом теге задаются параметры всем элементам на странице. Как понимать единицы EM в CSS и вычислять их значение? Все достаточно просто. Если font-size (то есть размер шрифта) в селекторе body будет равен 10 пикселям, 1 EM тоже равен 10 пикселям, то есть верстальщик задает значение этой единицы самостоятельно. В результате все остальные размеры, заданные в EM, будут высчитываться исходя из этого значения. Тексты, параметры которых задается в пикселях и в относительных единицах, могут не отличаться визуально до тех пор, пока их не придется изменять. Но они очень удобны при создании гибких модульных блоков. Если не задать размер шрифта, но использовать в коде относительные единицы, они будут рассчитываться по умолчанию, и 1 EM окажется равен 16 пикселям.
Особенности единицы измерения EM
Существует еще одна особенность при использовании относительных единиц измерения EM. Если в селекторе установлен размер шрифта равный 2 EM, тогда при использовании EM в параметрах для другого свойства в этом же селекторе величина этой единицы будет применяться иначе. В результате размер элемента увеличится вдвое. Параметры EM рассчитываются исходя из размера шрифта в определенном блоке. То есть, если font-size в селекторе параграфа (тег «p») равен 2 EM, а для body он составляет 10 пикселей, тогда при добавлении в селектор тега p размера внешней границы текста («margin») толщиной 1 EM он будет равен уже не 10, а 20 пикселям.
Для того чтобы получить размер шрифта, равный 10 пикселям, нужно использовать 0,5 EM. Такие изменения значений в разных частях кода часто путают начинающих верстальщиков. Существовала также проблема с использованием EM в CSS – при установке размера шрифта 0.875 EM, каждый последующий вложенный элемент уменьшался. Нежелательные эффекты вызывало использование этой единицы и в margin-bottom. В этом случае размеры шрифты влияли на поля вокруг элемента, так как в EM непосредственно относился к этому параметру блочной модели.
Единицы измерения REM в CSS
Теперь рассмотрим, что такое единица измерения REM и как ею пользоваться. Первое упоминание о REM появилось в 2011 году в комментарии пользователя к статье немецкого разработчика Геррита ван Аакена об использовании пикселей в CSS–коде. Эта относительная единица по значению близка к EM, и его название переводится как «корневой EM», или Root Em. Поведение REM более предсказуемо. Применение этой единицы в верстке облегчает подсчет размеров элементов в различных частях кода, так как REM в CSS равняется значению размера шрифта, установленного для корневого элемента – тега HTML. Но чаще это значение добавляется также и в body, чтобы исключить ошибки с расчетами. Использование REM в CSS, если его значение не прописано в теге HTML, становится еще проще. 1 REM будет равняться стандартным 16 пикселям, как и в случае с EM, значение которого не установлено.
Споры об использовании REM в CSS. REM против EM
У REM и EM есть свои плюсы и минусы. Существует множество споров среди верстальщиков, какую относительную единицу измерения применять при написании кода. Есть мнение, что использование REM в CSS делает верстку менее модульной, а EM усложняют верстку и требует внимательного подхода и подсчетов. Каждый верстальщик в процессе работы сам выбирает для себя, какую единицу измерения и где применять. Но на начальном этапе предпочтительнее все же пиксели. EM предпочтительнее для элементов, свойства которых масштабируются исходя из font-size. В остальных случаях лучше подойдут REM.
Применение REM в заголовках
Рассмотрим, как будут меняться заголовки текстов (теги h1–h6), если их прописать в REM. Допустим, что у заголовка есть поля вокруг него – padding, фон и указанный размер шрифта. Если нужно будет увеличить заголовок, то пространство между краями элемента сократится, поэтому padding придется переопределять. Но тогда может возникнуть проблема с тем, что все элементы просто перестанут помещаться на странице. Но есть задать размер шрифта в пикселях, а затем в настройках браузера попробовать его изменить на более крупный, ничего не произойдет. При употреблении REM он будет увеличиваться и уменьшаться в зависимости от настроек пользователя.
Ограничения Root Em
REM помогает создавать каскадные таблицы с различным font-size для заголовков и абзацев. Он значительно упрощает верстку, так как не нужно изменять код полностью – достаточно поправить размер шрифта в теге html. Существует также ограничение в использовании этой единицы. В старых версиях браузеров Opera и IE и в некоторых браузерах для Android они до сих пор не поддерживаются. Поэтому разработчики вынуждены использовать пиксели в качестве запасного варианта и писать двойной код. Современные браузеры будут считывать строчки с размером шрифта в пикселях и переводить их в REM, а устаревшие просто не увидят код с неизвестной им единицей измерения. Но если забыть об этом и начать разрабатывать сайт под какой-то определенный экран, тогда можно потерять множество пользователей, которые просто не смогут воспринять контент, сломавшийся из-за использования REM или EM.
Новые способы задать размер текста
В списке единиц размера в CSS сейчас находятся не только вышеперечисленные варианты. Появились и новинки:
- VW – равна 1/100 ширины браузера.
- VMIN – 1/100 меньшей стороны окна браузера.
- VMAX – 1/100 большей стороны окна браузера.
- VH – равна 1/100 длины браузера.
- EX – зависит от высоты буквы «х» в нижнем регистре.
- CH – рассчитывается в зависимости от символа "0" в шрифте текущего элемента.
Большинство этих вариантов также используются для дизайна сайтов с гибкой версткой, где размер контейнера измеряется в зависимости от размера окна браузера. Но для удобного масштабирования страницы обычно достаточно EM или REM.
