Html rem – «px», «em», «rem» и другие

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

В CSS-правилах используется два варианта единиц измерения: абсолютные и относительные. Изначально была известна лишь одна абсолютная единица измерения – пиксель. Ее размер зависел от матрицы или монитора, и его было легко рассчитать самостоятельно.

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

Для верстальщиков, работающих на СМИ, на странице важно выделить именно контент. Он должен быть удобным для чтения, с оптимальной длиной строки и достаточного размера, чтобы даже пользователю с низким зрением было удобно воспринимать текст. Неважно, с какого устройства пользователь читает статью и насколько у него хорошее зрение – ему важно понять содержание статьи без специальных приспособлений. При использовании пикселей в верстке увеличение масштаба часто приводит к тому, что количество слов в строке уменьшается, появляются некрасивые переносы текста или же контент вовсе выпадает из контейнера. Поэтому веб-разработчики и дизайнеры начали использовать при написании кода проценты и относительные единицы измерения, такие как EM, REM. Но они до сих пор не смогли полностью вытеснить пиксели.

История появления относительных единиц

Так как изначально страницы в большинстве браузеров не масштабировались, пиксели долго оставались единственным вариантом описания размеров шрифтов. Но с развитием веб-технологий появилась необходимость в создании новых единиц измерения. Так появились 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 в заголовках

Рассмотрим, как будут меняться заголовки текстов (теги h2–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.

fb.ru

Использование единиц px, em, rem в CSS

Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.

Для начала нужно усвоить базовое понимание этих единиц:

• Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
• Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
• Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).

Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size, padding, margin, position.

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

Пример:

div { font-size: 10px; padding: 10px; }

Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.

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

Пример:

div { font-size: 10px; padding: 10em; }

Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size. В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).

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

Пример:

Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.

div { font-size: 10px; padding: 10rem; }

Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.

Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem. Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?

• Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
• Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.

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

Пример:

div.parent { font-size: 10px; }
div.parent div.child { font-size: 0.5em; }

Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.

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

Пример:

div.parent { font-size: 10px; padding: 10em; margin: 10rem;}
div.parent div.child { font-size: 0.5em; padding: 10em; margin:10rem}

Для (div.parent)

• Размер шрифта = 10px.
• Внутренние поля с каждой стороны (10px = 1em, поэтому 10em * 10px) = 100px.
• Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.

Для (div.child)

• Размер шрифта (0.5em = 10px / 2) = 5px.
• Внутренние поля с каждой стороны (5px = 1em, поэтому 10em * 5px) = 50px.
• Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.

Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).

Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).

Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.

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

Данная публикация представляет собой перевод статьи «Use of px, em, rem units in css, which one I have to use and when?» , подготовленной дружной командой проекта Интернет-технологии.ру

EM, REM или PX – почему нельзя использовать «только пиксели»

От автора: споры ведутся уже давно – какие единицы измерения использовать в CSS? Мы, как и многие другие, сначала перешли на REM и потом вернулись к любимым пикселям. Мы просто потеряли тот след, почему мы перешли на REM единицы. Проблема связана не только с размером шрифта, но и с доступностью.

Если коротко:

пиксели – это каменный век, не используйте их;

используйте REM для размеров шрифтов и отступов;

используйте EM для медиа запросов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Пиксели

За все эти годы мы привыкли к пикселям (px). Все знают, что такое пиксель (хотя размер пикселя не всегда одинаковый, но это тема другой статьи). Всем удобно работать с пикселями, их легко переводить. Дизайнеры работают в пикселях, очень удобно брать размеры прямо из Photoshop и переносить их в верстку.

Так что же не так с пикселями?

Доступность

Я большой сторонник доступности в интернете.

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

В большинстве браузеров пользователь может сменить размер шрифта по умолчанию (обычно это 16px). Если пользователь указал размер шрифта по умолчанию 20px, все шрифты должны увеличиться пропорционально.

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

Если задать размер шрифта в пикселях, это не убьет всю доступность. Пользователь может изменять масштаб с помощью CTRL+/- (на OSX вместо CTRL клавиша CMD). Но можно ведь сделать все лучше.

Единицы измерения REM

Если вы хоть как-то знакомы с миром веб-дизайна, вы точно слышали про единицы измерения REM. Если все же не знаете, REM – это способ указать размер шрифта на основе размера шрифта корневого HTML элемента. С их помощью также можно быстро изменить размеры во всем проекте, поменяв размер шрифта корневого элемента (например, под определенный медиа запрос/размер экрана).

«REM единицы представляют собой размер шрифта корневого элемента (например, размер шрифта тега ). Если использовать эти единицы измерения для указания размера шрифта корневого элемента, вы получите изначальное значение.»

Как перевести REM в PX

Стандартный пример: размер шрифта html задан в 10px, параграф задан в 1,6rem. 1,6rem*10px = 16px.

Самый распространенный сценарий, который я видел, это установка корневого размера шрифта в 10px с помощью REM. Это позволяет легко и быстро переводить одни значения в другие, просто поделив на 10.

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

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

Так как же нам не ломать доступность?

Задайте размер шрифта корневого HTML элемента в процентах. Проценты будут связаны с размером шрифта в браузере по умолчанию. Обычно ставят размер шрифта на 62,5%. 62,5% от 16px (стандартный размер шрифта по умолчанию) составляют 10px. То есть 1,6rem = 16px. Если пользователь поменяет размер шрифта по умолчанию, например, на 20px, то 1,6rem будут равны 20px. Если пользователь хочет шрифты еще больше, пусть ставит. Счастливый дизайнер, счастливый разработчик. Со всеми числами легко работать.

Идеальный вариант – оставить размер шрифта HTML на 100%, но тогда вычисления станут немного сложнее. Например, 16px будут равны 1rem, а 20px станут 1,25rem, 24px превратятся в 1,5rem и т.д.

Sass/SCSS в помощь

Вычислять все эти числа в голове довольно затруднительно и долго. К счастью, вам не следует беспокоиться, если вы используете один из CSS препроцессоров Sass/SCSS, LESS. Все цифры можно вычислять с помощью функций.

А что по поводу EM единиц измерения?

EM единицы работают почти так же, как REM, пока дело не касается вложенности. Мне никогда не нравились EM, особенно когда нужно задавать размер шрифта. Например, возьмем div с размером шрифта 2em, добавим параграф со шрифтом 2em. Размер параграфа теперь 2em относительно div. Я быстро сбиваюсь в вычислениях, где какой размер. Код быстро становится неудобным. Именно эту проблему решает REM – размер всегда привязывается к корневому элементу.

Что по поводу медиа запросов?

Итак, мы установили, что значения в пикселях переписывают значения браузера по умолчанию, поэтому лучший выход – перевести все пиксели в REM, верно? Не совсем.

В этой статье описываются ключевые различия в использовании пикселей, EM и REM в медиа запросах (https://zellwk.com/blog/media-query-units/). Прочитайте ее и возвращайтесь.

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

Все становится немного сложнее. У EM и пикселей есть свои минусы с медиа запросами, когда дело касается различий значений с плавающей точкой. Если вы используете min и max медиа запросы в одном блоке кода, то вам придется попотеть, когда пользователь начнет менять масштаб браузера или размер шрифта по умолчанию.

Пара примеров:

Мы используем шесть цифр после точки, так как отдельные браузеры не видят разницы межу 2-5 цифрами после точки.

Пример 1: масштаб в браузере установлен в 100%, ширина окна 640px

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss

Пример 1б: масштаб в браузере установлен в 100%, ширина окна 639px

min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit

Нельзя использовать 6 цифр после точки для EM, это запускает оба медиа запроса. Пример 2: масштаб в браузере установлен в 110%, ширина окна 704px (так как 640px*110% = 704px)

min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639.999999px = Hit

Пример 2б: масштаб в браузере установлен в 110%, ширина окна 705px

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss

Мы не можем использовать две цифры после точки для EM. Нам осталось использовать 6dp. Это работает с зумом в браузерах. Однако… Пример 3: масштаб в браузере установлен в 100%, размер шрифта 20px, ширина окна 800 (640*125% = 800)

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit

И опять, 6dp для EM использовать нельзя. Нельзя использовать пиксели для медиа запросов, так как они запускают оба запроса 640px/639px, потому что игнорируются EM/REM.

Какой же выход?

К сожалению, ответа нет. Пока браузеры не решат проблемы с округлением, вы в западне. Простейший выход – не создавать min-width и max-width в одном блоке. Пример:

body { @media screen and (max-width: 63.99em) { background: blue; } @media screen and (min-width: 64em) { background: blue; } }

Проблема с кодом выше заключается в том, что есть сценарии, когда будут запущены или проигнорированы оба медиа запроса. Так что лучше всего писать что-то такое:

body { background: blue; @media screen and (min-width: 64em) { background: blue; } }

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

Ловушки

У данного подхода есть несколько ловушек:

если вы привыкли писать min-width и max-width медиа запросы в одном блоке кода, то вам придется ждать еще дольше;

возрастает сложность, так как вам придется переписать CSS в одну из сторон, вместо того, чтобы просто сказать браузеру, чтобы тот использовал вариант А или B;

возрастает размер файла из-за перезаписей, несильно, но это стоит учесть.

В зависимости от проекта, кто его разрабатывает и таких факторов, как бюджет (нужно быть реалистами), пиксели будут намного проще и быстрее. Намного проще и быстрее игнорировать доступность.

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

Источник: http://engageinteractive.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

webformyself.com

em, px, pt, cm, in…

См. также оглавление со всеми советами.

На этой странице:

em, px, pt, cm, in…

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1.2in; margin: 0.5cm), и наоборот.

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

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt
↓

Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em.

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in и pc, как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px. Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px, а не pt, cm и т.д.

Используйте em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt, пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt, ни других абсолютных единиц, а использовать только em и px.

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px, часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em. Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em: h2 {font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px, всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem. Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em, который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и h2 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

www.w3.org

Единицы размера в CSS | Учебные курсы

Существует много свойств CSS, которые требуют размер в качестве единицы:

• font-size определяет размер текста;
• border-width определяет толщину границ элементов;
• margin определяет пространство между элементами;
• left/right/top/bottom позволяют позиционировать и перемещать элементы.

Наиболее часто используемые единицы:

• px для пикселей;
• % для процентов;
• em для определения размера относительно родительского значения font-size.

Пиксели

Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS.

Пиксель может быть использован для задания фиксированной ширины элемента:

body { width: 400px; }

Или установить размер текста:

body { font-size: 20px; }

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

Они также широко используются для позиционирования и расстояния.

Проценты

Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.

К примеру, блочные элементы, такие как абзацы, естественным образом занимают всю доступную ширину. Следующее правило CSS изменит их размер до половины доступной ширины.

p { width: 50%; }

Проценты могут помочь задать другие свойства CSS, такие как размер текста.

CSS

strong { font-size: 150%; }

HTML

<p>Есть <strong>важные</strong> проблемы, стоящие перед нами.</p>

em

em является относительной единицей и зависит от значения font-size элемента.

Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.

Не следует путать размер em с селектором em, который ориентирован на элемент <em>.

Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши <h2> были вдвое больше, чем основной текст, ваши <h3> в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:

body { font-size: 16px; }
h2 { font-size: 2em; }        /* = 32px */
h3 { font-size: 1.5em; }      /* = 24px */
aside { font-size: 0.75em; }  /* = 12px */

Если вы решите изменить размер текста <body>, относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.

Только изменив одно значение, поменяются и все остальные значения:

body { font-size: 20px; }
h2 { font-size: 2em; }        /* = 40px */
h3 { font-size: 1.5em; }      /* = 30px */
aside { font-size: 0.75em; }  /* = 15px */

rem

Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент <html>.

html { font-size: 18px; }
body { font-size: 1rem; }     /* = 18px */
h2 { font-size: 2rem; }       /* = 36px */
h3 { font-size: 1.5rem; }     /* = 27px */

Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.

Если вы установили html { font-size: 18px; }:

• 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
• 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.

Быстрый пример, где 2em отличается от 2rem:

html { font-size: 20px; }
p { font-size: 0.8rem; }        /* = 16px */
p span { font-size: 2em; }      /* = 16px * 2 = 32px */
p strong { font-size: 2rem; }   /* = 20px * 2 = 40px */

<span> полагается на значение font-size у <р>, в то время как <strong> полагается на значение font-size у <html>.

Какую единицу использовать?

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

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

Перейти к заданиям

webref.ru

Что такое rem? — WebDesignStudio1

Использование единицы REM при задании величины шрифта в HTML документах.

В CSS3 введено несколько новых единиц, включая rem, которая означает root em. Давайте разберемся, что такое rem и как он работает. В предыдущей статье PX EM PT и другие … указывалось, что относительная единица выражения величины шрифта em удобна для HTML документов, но не лишена недостатков. Для устранения этих недостатков и была предложена единица rem, которая определяет размер шрифта корневого элемента HTML документа.  Что это дает? Теперь можно определить требуемый нам размер шрифта тега html, пусть это будет 1 rem, и затем определять размеры шрифтов всех последующих элементов в процентах от rem, а не от  родительского элемента, как это происходит при использовании em.

Например,

html { font-size: 62.5%; }   /* размер шрифта корневого элемента = 10px */
body { font-size: 1.4 rem; } /* размер шрифта для элемента body =14px */
h2   { font-size: 2.4 rem; } /* для h2 font-size =24px */

Поскольку по умолчанию в браузерах размер шрифта равен 16px, в примере rem для удобства определен как  62,5% от базового, что составляет 10px

Поддержка браузерами размерности REM

Встает извечный вопрос – а как этот rem поддерживается браузерами?
Вы очень удивитесь, но поддержка браузерами довольно приличная: в Safari 5, Chrome, Firefox 3.6+ и даже в Internet Explorer 9 поддержка rem реализована. Opera поддерживает начиная с 11.6. К моменту появления статьи браузеры мобильных устройств не очень хорошо поддерживали эту единицу, поэтому кто разрабатывает для мобильных устройств, будьте внимательны, проверяйте поддержку.

Что же делать в случае браузеров, которые не поддерживают rem? Можно использовать резервный вариант, используя px. Для реализации этого мы должны сначала указать величину font-size в пикселях px, а следом повторить атрибут, используя rem, как в примере ниже.

html { font-size: 62.5%; }
body { font-size: 14 px; font-size: 1.4 rem; }
h2   { font-size: 24 px; font-size: 2.4 rem; }

Вот и все, теперь  у нас есть последовательный и предсказуемый размер шрифтов во всех браузерах, и масштабируемый текст во всех текущих версиях основных браузеров.

Опубликовано: 12.01.2014 в  рубрике CSS, HTML

webdesignstudio1.net

Кроссбраузерный CSS REM: поддержка для старых браузеров

html {font-size: 10px;}
div {font-size: 20px; font-size: 2rem; } /* =20px */
span {font-size: 14px; font-size: 1.4rem; } /* =14px */