Единицы измерения html – Какие единицы измерения предпочтительнее использовать для адаптивной верстки CSS 3?

Какие единицы измерения выбирать при верстке / Habr

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

Единицы длины бывают двух категорий: абсолюные и относительные. К абсолютным относятся:

• дюймы (in)
• сантиметры (cm)
• миллиметры (mm)
• пункты (pt)
• пики (pc)

В терминах спецификации css 1pt = 1/72in, а 1pc = 12pt.
В свойстве font-size задание отрицательного значения в единицах длины, например -25cm, недопустимо.
Почему абсолютные? Потому что за ними в физическом мире стоит реальная величина, тоесть эталоны.
С такими единицами работает устройство вывода, которое имеет реальный физический размер, например: при печати будем использовать такие единицы.
А вот для мониторов эти единицы не имеют никакого значения, есть некая условность, но это действительно только лишь условность.
К относительным единицам относятся:

• em (кегельная)
• x-height (ex)
• px (пикселы)

Проценты (%) — всегда величина, о которой стоит говорить отдельно. Она настолько важная, что W3C вынес ее в отдельную колонку. Тоесть % можно писать не у всех правил, а только у некоторых и когда мы пишем % мы должны понимать от чего они считаются.
Пиксель — это мельчайшая точка, которую можно установить на экране компьютера.
Почему пиксель относительная величина? Мы берем физический монитор, у которого есть диагональ — это реальная физическая величина. Но ведь мы можем поставить на нем разрешение любое, правильно? В зависимости от поставленного нами разрешения, величина пикселя может меняться. Вот почему пиксель — относительная величина. Тоесть на разных мониторах px имеет разный размер.
Единица em ссылается на размер стандартного шрифта, установленного в глобальныъ параметрах браузера.

На таблице обозначения отдельных важных размеров шрифтов. Большая их часть нам не пригодится, но некоторые нужно знать.
Под цифрой 4 обозначена базовая линия элементов шрифтов, а под цифрой 13 — font-size, em. Так вот, em — это размер шрифта, который определяется высотой заглавной буквы и размеры выносных элементов сверху и снизу( вверху могут появиться диакритические знаки, например: ё или й ).
А что такое ex? Это высота строчной буквы. Под цифрой 3 в таблице так и написано. Для разных шрифтов это соотношение имеет разную величину. Но не все браузеры поддерживают такое соотношение.
Например: компания Microsoft предложила считать 1em = 2ex для всех типов шрифтов. Именно по причине, что ex в разных браузерах может быть разным, лучше в работе его не использовать. Некоторые браузеры действительно считают ex правильно, а некоторые, как IE в половину от em. А в реальности он может быть 0.46, на маленьких шрифтах такое несоответствие незаметно, а на больших будет существенное отличие.
Теперь по поводу использования на сайтах pt, pc, in.
Если мы размер элемента на сайте укажем в pt, он все равно от чего-то будет браться. Так как же браузер решает эту проблему?
На заре развития компьютерной техники, размеры мониторов были небольших диапозонов. И компания Microsoft предложила взять для определенности 96px = 1in и таково будет у нас разрешение наших устройств.
1in = 96px
А Apple сказал нет 🙂 Давайте будем ориентироваться на полиграфистов и возьмем:
1in = 72pt
Но на практике получилось следующее: чем меньше разрешение, тем меньше есть возможность разместить там информацию.
Поэтому Apple передумала и сделала 1in = 96px, но это все полная ерунда, так как реальная физическое разрешение ваших устройств колеблется примерно от 60 — 600px / in.
Но по прежнему величина 96 является определяющим для пересчета. Это значит, что если написать размер 10pt, то браузер сделает следующее: 96 / 72 * 10. Вот такая история при пересчете pt в px.
На практике я не советую на мониторах использовать абсолютные единицы. На мониторах это вообще не имеет никакого значения, а вот при печати желательно, как раз их то и использовать. При печати нужно заботиться о том, чтобы все выводилось в pt.

Единицы измерения в HTML — Как создать сайт

Единицы измерения в языке HTML

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

В языке разметки HTML, существует два вида единиц измерений, это пиксели px и % проценты.

Примеры использования:
height="100px" — высота элемента 100 пикселей,
width="50%" — ширина элемента 50 процентов.

Экран монитора состоит из мельчайших точек, называемых пикселями. Современные мониторы (ноутбуков и компютеров) имеют чаще всего размер экрана (разрешение экрана) величиной в 1366x768, которое означает, что ширина экрана составляет 1366

пикселей, а его высота 768 пикселей.

Относительный и абсолютный размеры

Пиксели — это абсолютный размер,
Проценты — это относительный размер.

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

Допустим разрешение вашего экрана составляет 1366x768, вы создали друг под другом, две таблицы и назначили первой таблице, ширину в 1366px (пикселей):

<table>

а второй таблице, ширину в 100% (процентов):

<table>

Обе таблицы, займут всю ширину экрана. В пикселях, ширина обеих таблиц будет равна 1366px

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

100 процентов не выйдет за пределы экрана, она опять займёт всю ширину, но теперь её ширина будет равна 1280 пикселям.

Вот и вся разница между абсолютным и относительным размерами. Абсолютный размер всегда остаётся неизменным, а относительный меняется в зависимости от внешней среды.

Читать далее: Специальные символы в HTML

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014

Навигация по записям

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

Вы здесь: Главная — CSS — CSS Основы — Единицы измерения в CSS

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

единицами измерений всё-таки стоит, и в этом Вам поможет данная статья.

Для начала давайте разберём, что такое единицы измерений:

p {
  font-size: 14pt;
}

Вот именно pt — это пример единицы измерений. Мы задали размер шрифта 14 пунктов, давайте разберём, какие ещё есть единицы измерений в CSS:

Обозначение	Описание
px	Пиксели. Пиксель — это самая маленький объект, различимый на экране монитора.
em	Размер в em зависит от текущего размера шрифта. Если стоит 1.5em, значит, данный размер в 1.5 раза больше, чем размер шрифта в данном элементе.
%	Аналог em, но 100% — это 12pt. Также проценты позволяют легко масштабировать размеры под разные устройства.
ex	1ex — это высота строчной «х» у текущего шрифта.
pt	Пункты. 1 пункт — это 1/72 дюйма.
sm	Размер в сантиметрах.
mm	Размер в миллиметрах.
in	Дюймы. 1 дюйм — это 2.54 см.
pc	Пики. 1 пика — это 12 пунктов.

Обратите внимание, что первые 4 единицы измерений — относительные, а следующие 5 — абсолютные. Я настоятельно рекомендую использовать только относительные размеры (за редким исключением), так как они масштабируются, и сайт будет смотреться на самых разных разрешениях нормально. На практике Вы будете использовать 2-3 единицы измерений, однако, если вдруг Вы встретите, например,

пики, то теперь будете знать, что это такое.

• Создано 22.02.2012 14:59:51
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Единицы измерения в CSS, урок

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

Условно единицы измерения в CSS можно разделить на три группы:

1. Величины, которые используются для измерения длин реальных предметов:

• in — дюймы;
• cm — сантиметры;
• mm — миллиметры.

2. Величины, которые пришли в CSS из типографии. Они используются для установки размеров шрифта, межстрочных интервалов и прочих типографских величин. Эти величины часто используются полиграфистам:

• pt — типографский пункт;
• pc — пика;
• ex — высота строчной буквы «x» в шрифте.

3. Величины, которые являются относительными, то есть реальный размер элемента вычисляется относительно какой-либо иной величины:

• em — вычисляется относительно размера шрифта элемента;
• px — пиксель, вычисляется относительно устройства отображения;
• % — процент, такие величины вычисляются относительно размеров элемента-предка.

Таким образом, теперь вы знаете, что такое единицы измерения в CSS и на какие группы они подразделяются. Величины: %, px, em, ex являются относительные, величины: in, cm, mm, pc, pt — абсолютные. При создании сайта лучше всего использовать только относительные размеры, так как они масштабируются, и сайт будет смотреться на самых разных разрешениях нормально.

Понравилось? Поделитесь с друзьями!

Единицы измерения в CSS | Techrocks

Перевод статьи «Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».

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

В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

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

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные единицы измерения у нас есть.

• % – измерение в процентах.
• em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
• rem – размер шрифта относительно корневого элемента документа.
• ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
• ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.

See the Pen CSS Relative Units by Matthias (@fullstack-to) on CodePen.

Единицы измерения в CSS.EM, EX, PX, %, IN, CM, MM, pt, pc -Будни программиста

В CSS есть несколько основных единиц измерения это относительные и абсолютные. При работе с CSS следует точно разобраться с их применением иначе работа с каскадными таблицами стилей будет сложна и непонятна. Абсолютные единицы измерения делятся на 5 типов, относительные на 4. Следует знать что Абсолютные единицы измерения не зависят от устройства вывода, т.е. мониторов и экранов, относительные же определяют размер элемента относительна другого размера т.е. монитора, экрана, родительского элемента и т.д.Теперь подробнее о них.

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

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

Единица	Описание
em	Высота текущего элемента
ex	Высота символа х
px	Пиксел
%	Процент

EM

Измеряемое значение зависит от размера шрифта текущего элемента (он устанавливается через атрибут font-size). Когда он явно не задан используется размер текста который заложен в браузере. Поэтому 1em изначально равен размеру шрифта заложенному в браузере по умолчанию.

EX

Этот аргумент  определяется как высота символа «х» в нижнем регистре. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.

PX

Пиксель это 1 точка разрешения устройства вывода (монитора или экрана). Т.е. Если у вас разрешение монитора 1024*768 то вы имеете 1024 пикселя по горизонтали и 768 пикселей по вертикале. Т.е. размер пикселя напрямую зависит от разрешения устройства вывода и его технических характреристик.

%

Процентная единицы измерения зависит от размеров родительского элемента.

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

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

Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Из данных единиц следует описать только pt (пункт), т.к. pc это производное от pt а использование in, cm и mm описывать не нужно.

Пункт является самой распространенной  и повсеместно используемой единицей измерения шрифтов (помните как выставляли размер шрифта в том же ворде или опен офисе?).

На этом все, удачи 😉

Теги: %, cm, CSS, em, ex, font-size, in, mm, pc, pt, px

Новые и старые единицы измерения (краткий обзор) — CSS-LIVE

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

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

Пиксели — абсолютная единица

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

В CSS1 px пиксель сделали относительным, потому что он считался реальным пикселем устройства. Ведь, по сути, устройства разные. В каком нибудь лазерном принтере пиксель — это один микрон, а например, на уличном экране, пиксель уже равняется пару сантиметрам. В общем px был относительно DPI устройства вывода. В CSS2.x поняли, что поторопились, и стали вводить понятие «логического пикселя» в зависимости от угла зрения. Пиксель определили как 1/96 дюйма при рассмотрении с расстояния вытянутой руки, а потом вообще плюнули и решили, что как его ни рассматривай, по сути-то он именно 1/96 дюйма и есть, и все браузеры именно так его и отображают и, не мудрствуя лукаво, зафиксировали соотношение 1px = 0.75pt = 1/16pc = 1/96in тем самым пиксель стал полноправной абсолютной единицей, как всегда и воспринимался интуитивно.

При этом физический пиксель может не соответствовать CSSному. На том же четвёртом айфоне физических пикселей 960, а CSS-ных — 480, как у предыдущих айфонов каждый CSSный пиксель картинки рисуется четырьмя физическими. Разработчики браузеров предложили такое расширение CSS media queries (пока нестандартное), как device-pixel-ratio, которая показывает соотношение реальных пикселей девайса с условными CSS-ными. В зависимости от этих показателей можно менять стили, или грузить картинки разной чёткости. Например, для старых айфонов мы можем грузить фон, скажем, 480 на 320 (грубо, но быстро), а для новых — размеров все 960 на 640 и масштабировать фон через background-size до 480 CSS-ных пикселей, по идее, на экране будут играть все пиксели картинки.

Кстати, у новых айпадов и макбуков с пикселами будет та же история, что и у айфона 4. Так же для девайсов высокого разрешения, типа принтеров, рекомендуется точно выдерживать абсолютные единицы (те же дюймы и сантиметры) и пиксели выводить из этой пропорции, так что на CSSный пиксель может приходиться даже дробное число физических. 
А для девайсов низкого разрешения типа экранов и для девайсов «рассматриваемых с нестандартного расстояния» рекомендуется привязывать CSS-ные пиксели к ближайшему подходящему целому числу пикселей девайса. На большинстве экранов – 1:1, на новых айфонах с айпадами и будущих макбуках – 2:1 (4:1 по площади)

pt

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

Считается, что с pt можно достигнуть наилучшего, кросс-платформенного и кросс-браузерного результата при печати документа. Многие известные авторы CSS книг, да и не только, настоятельно рекомендуют использовать пункты (pt) строго для печати! Хотя на моей памяти, есть несколько, действительно опытных веб-мастеров, которые всю свою сознательную жизнь использовали в своих проектах пункты, и отнюдь не для печати. Но, сделав выбор в пользу этих единиц измерения, они руководствовались тем, что pt, по сути, считается самой универсальной длиной. Например, IE6 отлично масштабирует пункты, в отличии от пикселей, которые остаются неизменными в этом браузере.

В остальном пункты ведут себя практически так же. Единственное, что в них плохо, это неудобство, которое включает в себя коэффициент пересчёта. 1px = 0.75pt и это всегда нужно учитывать, при пересчёте шрифта, ширины и прочих вещей. В связи с последним, пожалуй самой простой и удобной единицей измерения всё же остаются пиксели (px).

%

Проценты (%) — это уникальная единица измерения. Эта относительная единица работает так же, как и слышится. Т.е, если, например, у родительского элемента установлен размер шрифта 24px, то выставив у дочернего элемента размер шрифта в 50%, последний будет меньше первого ровно в два раза, и будет составлять 12px.

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

font-size: .5em; margin: .5em vs. font-size: 50%; margin: 50%

Т.е, если, например, в последнем случае хочется, чтобы отступ был равен межстрочному интервалу, то из процентной величины шрифта напрямую его не взять. Всё равно придётся прибегать к (r)em-ам или абсолютным единицам.

Ещё один из важных моментах в жизни процента, это пример, когда задав вертикальные отступы у элемента в %, многие начинающие верстальщики (да, и не только), полагают, что высчитываться они будут относительно высоты родительского элемента. Но, на самом деле это не так. На этом примере видно, что при изменении высоты, отступы у параграфа остаются неизменными, что нельзя сказать про результат во время смены ширины контейнера. В этом случае вертикальные отступы начинают пропорционально изменяться, относительно ширины своего родительского элемента. Т.е, выходит, что вертикальные отступы реагируют на width предка, а не на его height. Это может показаться странным, но на самом деле всё вполне логично. Составляя эту часть спецификации, мудрые дядьки из W3C исходили из того, что, если, например, верхнее или нижние отступы задать как процент от высоты родителя, это может привести к бесконечному циклу. Ведь в таком случае высота родителя постоянно бы увеличивалась, чтобы вместить вертикальные отступы, которые затем снова должны были бы увеличиться относительно новой высоты и т.д. Этот момент очень важен и о нём нужно помнить.

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

em

Начнём с того, что em вычисляется относительно размера шрифта родительского элемента. Один em равен значению свойства font-size заданного шрифта. 
Всё это очень важно понимать, при таких ситуациях, как, например, вложенность нескольких элементов в друг друга. 

Рассмотрим небольшую ситуацию. Предположим, у нас есть элемент <div>, в который вложен <span>, в который в свою очередь вложен элемент <i>. Допустим у <div> задан размер шрифта в 20px, а у его дочернего <span>-а — 0.5em, а у самого вложенного (<i>), ну скажем — 1.5em

<div>
        Размер шрифта: 20px
	<span>
		Размер шрифта: 10px
		<i>Размер шрифта: 15px </i>
	</span>
</div>

.wrapper { font-size: 20px; }
.wrapper span { font-size: 0.5em; background: #FC9; }
.wrapper span i { font-size: 1.5em; background: yellow; }

А вот собственно и результат. Но давайте разбираться. Как я уже и говорил, em пляшет от установленного шрифта. И, так как у нашего контейнера размер шрифта составляет 20px, то у вложенного <span>-а один em будет равен так же 20px, а так как его значение шрифта равно 0.5em, то, переведя это в пиксели (20/(1/0.5)), мы получим ровно половину от 20, т.е. 10px. Ну, а далее всё по накатанной. Для элемента <i> один em уже будет равняться 10px (полученный в результате пересчёта размер шрифта его родителя). Ну, а раз у <i> стоит шрифт, размером в 1.5em, значит нам просто нужно к 10 прибавить ровно половину (10 + (10/2)), что в сумме даст 15px. В принципе не очень-то и сложная арифметика, единственное, что нужно, это учитывать эти вещи и не запутаться во время вёрстки. Вот, хоть и не актуальная, но хорошая статья на эту тему.

Да, и, как вы могли заметить, em легко принимает в качестве своих значений дробные числа. Этим они отличаются от других единиц, так как в связи с этой особенностью, с дико длинными дробями em-ы получают высокую точность. Но, стоит отметить, что, по наблюдениям моих коллег, браузер IE отбрасывает третий и последующий знаки после запятой для em-ов и позволяет писать всего лишь два знака после запятой. Примерно так — 1.23.

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

Кстати, до недавнего времени em-ы считались самими «модными» единицами измерения. Модными в плане болезни под названием «em», которой болели многие разработчики, в том числе и я. Симптомы этой болезни таковы, что веб-разработчик проставляет em-ы где только можно и нельзя. Тыкая их не только в размеры шрифта, но и в ширины, высоты, отступы и другие части элементов. Причём делая это неосознанно, а ради какого понта или моды. В связи с этим сайты, напичканные этими единицами измерения, при малейшем «ветре» начинают разваливаться, разнося контейнеры и блоки в пух и прах.

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

Первый пример — неправильное использование em

Попробуйте увеличить размер шрифта в настройках браузера и вы увидите, что произойдёт. Хотя на такое лучше не смотреть. Сайт полностью развалился, блоки разъехались в разные стороны. Находится на таком сайте невозможно, текст не читаем, информация невосприимчива, вокруг ужас. Соответственно с такого сайта хочется поскорее убежать.

Почему такое произошло? Всё очень просто, если взглянуть в код, то в нём отчётливо можно увидеть, что повсюду царит em. Эта единица измерения там выставлена всему живому, почти что всем элементам, начиная с самого главного контейнера и заканчивая каким нибудь малонужным span-ом. Причём в em прописан не только их размер шрифта, а как я уже говорил, ширина, высота, отступы, размеры, да и вообще всё что угодно.
Это одна из причин, вторая — это то, что графическое оформление (особенно фоновые картинки) привязано к пиксельной сетке и не может масштабироваться вслед за шрифтом (по крайней мере кроссбраузерно на сегодняшний день) В целом всё сделано бездумно, без оглядки на будущее. По хорошему нужно было бы сделать картинки с запасом, ограничить ширину главного контейнера, да и многих других элементов, в пикселях, а не в em-ах. Ведь, далеко не все вещи на сайте, строго обязаны масштабироваться. Масштабирование следует применять правильно и с умом.

Второй пример — правильное использование em

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

В чём же отличие? Отличие в том, что к моменту верстки этого сайта, я уже переболел em-ами, добрые люди спустили меня на землю, дав понять, что em-ы — это не панацея, и что, перед тем, как их применять, следует 100 раз отмерить, а только потом резать. Что и было сделано в этой работе. Перед тем, как верстать тот или иной блок, я старался проверять всевозможные варианты, размеры, вид этого блока, при разных разрешениях, размерах шрифта и экранах. Проставлял нужные em-ы только в те места, где благодаря им, при масштабировании картина в целом не портилась и сайт сохранял свой первоначальный вид.

Отсюда можно сделать вывод, что em — это полезная вещь, но только там, где она действительно необходима. Плюс, последнее время эта «техника» уже менее актуальна, чем раньше. Дело в том, что современные браузеры научились вполне отлично масштабировать весь документ. Если быть точным, то это называется «Полностраничное масштабирование документов», поэтому применение для этих целей таких единиц измерения, как em, отошло на задний план.

Вертикальный ритм

Всё, что мы узнали о em-ах до этого, не все их достоинства. Есть и другие вещи, одна из которых называется «Вертикальный ритм», или попросту межстрочное расстояние, которое очень удобно выравнивать с помощью em.

Как я уже и говорил, в своих значениях em позволяет указывать не только целые числа, но и дроби, например так — 1.23535em, а это прибавляет им огромную точность. В связи с этим, мы легко можем настраивать межстрочный интервал с помощью этих единиц. Есть разные сервисы по созданию таких вот интервалов, основанных на em-ах. Вот один из них. Там можно выбрать название шрифта, размер и выставить нужный интервал. Единственное, о чём нужно помнить, это то, что к каждой задаче нужны свои значения, шрифты, размеры и интервалы. Т.е. от этого сервиса можно лишь только начать плясать, а дальше уже допиливать вертикальный ритм под свои нужды.

rem

rem — новыя единица измерения, введённая спецификацией. Она означает примерно «Корневой em» (root em).

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

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

Здесь я определил базовый размер шрифта, чтобы было удобно использовать rem, отталкиваясь от 1rem = 10px. В остальном rem, по сути, представляет из себя точно такую же единицу измерения, что и em, с тем же функционалом и поведением.

А что же с поддержкой в браузерах?

Вы может быть будете удивлены, но поддержка вполне приличная. Safari 5, Chrome, Firefox 3.6 +, и даже Internet Explorer 9 имеют поддержку этих единиц. Приятной частью является то, что IE9 поддерживает изменение размера текста, который определяется с помощью rem. (Увы, бедная Opera (до 11.10, по крайней мере) не осуществила поддержку этих единиц. Но, в последней 11.60 всё отлично.

Что делать с теми браузерами, которые не поддерживают rem? Я бы предложил указывать их размеры в обычных и надёжных пикселях. Благо для IE6-8 есть условные комментарии, которые абсолютно законны и валидны.

vh и vw

rem — это не единственная новинка спецификации. Я бы хотел представить вам ещё несколько. vw и vh — единицы, которые отталкиваются от размеров области просмотра.

Давайте представим ситуацию. У нас на сайте присутствуют элементы, которые должны поместиться в область просмотра, причём, допустим, не полностью, а составлять 95% ширины и высоты окна. С помощью JavaScript мы могли бы высчитывать размеры окна, делать перерасчёт и подставлять эти данные в наш свойства нашего элемента. Но, это, во-первых, неудобно, постоянные перерасчёты при ресайзе окна, а во-вторых, само использование JavaScript для этих целей не самая лучшая затея. С помощью vw и vh мы можем вычислить размер элемента относительно области просмотра. Один vw равен 1/100 ширины всего экрана, а один vh соответственно 1/100 высоты. Для того, чтобы элемент занимал, например, всю ширину окна браузера, его ширине следует выставить 100vw.

Где бы это могло пригодится?

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

А что с поддержкой браузеров?

Вот тут, к сожалению всё не так гладко, как нам хотелось бы. На данный момент, как это не удивительно, vw и vh поддерживает только лишь единственный браузер — Internet Explorer 9. Но, стоит надеется, что в ближайшем будущем этот удручающий факт начнёт меркнуть и мы с можем в полной мере насладиться этими единицами в любимых браузерах.

vm

Ну, здесь всё просто. vm — это точно такая же единица измерения, что и две предыдущие (vw, vh). Отличие только в том, что она отталкивается от самой короткой по длине стороны. Например, если, ширина экрана будет равна 500px, а высота 800px, то один vm будет равен 500/100, т.е. 5px. Поддержка в браузерах идентична предыдущим. Internet Explorer 9, единственный браузер, работающий с этой величиной, на данный день.

ch

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

ch – это относительная единица, но отталкивается она не совсем от размера шрифта, а если быть точным, то по спецификации:

Equal to the advance measure of the «0» (ZERO, U+0030) glyph found in the font used to render it.

Равна авансовой ширине литеры «0» (ноль, U+0030), найденной в шрифте, используемом для его (элемента) отображения

Почему именно «0»?
На самом деле «0» — это условный символ, на его месте может быть любая другая цифра. Т.к. цифры в уважающих себя шрифтах и должны быть одинаковыми в ширину (чаще всего все цифры в шрифте одной ширины, но слепо полагаться на это нельзя, лучше перепроверить).

Где поддерживается?
А вот здесь самое интересное. Дело в том, что на данный момент единицу ch поддерживают только два браузера: Firefox 10 и Internet Explorer 9, но делают они это совершенно по разному. Но прав, на мой взгляд, именно Firefox. И вот почему…

Откройте этот тестовый пример в IE9 и Ff10. Посмотрите разницу. Обратите внимание на верхний блок (с классом «.ref») и на следующий за ним, ширина которого равна 10ch. Ff10 отображает второй блок, по идее, правильно, потому что его ширина точно совпадает с верхним блоком (где находятся одни нули), а вот в IE9 розовый блок явно меньше, что уже само по себе противоречет спецификации. По самому нижнему блоку можно увидеть, на сколько ошибается IE9. Я выставил блоку letter-spacing в значение —.079em и только после этого последние блоки сравнялись. Причём шрифты monospace тут не приделах, я выставил sans-serif (Arial) и получил такую же картину. 

Скорее всего такое поведение IE9  обусловлено тем, что единица ch сейчас не востребована и IE видимо не уделил ей должного внимания. И поэтому она поломана в этом браузере. Но, есть надежда, что к релизу IE10 этот недочёт всё таки исправят.

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

Резюме

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

Внимательно изучите каждую единицу в отдельности, и пробуйте применять их на практике. Удачи!
 

P.S. Это тоже может быть интересно: