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

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

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

EM

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

EX

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

PX

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

%

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

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

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

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

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

Я упоминала новые (относительно) единицы измерения. Эти единицы – vw, vh, vmin и vmax, они основаны на размере вьюпорта браузера. Их фактический размер меняется в зависимости от изменения области просмотра браузера, что делает эти единицы идеальными для адаптивного дизайна. Хотя в моем предыдущем посте я выступила против использования этих единиц для указания размеров шрифта, они могут быть очень полезны для работы с элементами макета.

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

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

Я сконцентрирую внимание на первых двух, так как они наиболее часто используются. Во многих случаях единицы viewport (vh и vw) пересекаются с процентами в плане возможностей. Тем не менее, каждая из них имеет свои сильные и слабые стороны.

Если резюмировать, то получится следующее:

Когда имеешь дело с шириной, то лучше подходят %, а если с высотой, то лучше vh.

Элементы во всю ширину страницы: % > vw

Как я уже говорила vw определяет размер элемента исходят из ширины viewport. Однако, браузеры рассчитывают размер с учетом места для скроллбара.

Если ширина страницы превышает ширину viewport, то появляется полоса прокрутки. Однако на деле ширина viewport больше, чем ширина элемента html

Viewport > html > body

Поэтому если вы установите ширину элемента в 100vw, то элемент выйдет за пределы html и body. в данном примере я сделала красную границу вокруг элемента html и залила разделы разными цветами.

Из-за этого нюанса делать элементы на всю ширину страницы лучше при помощи процентов, а не опираясь на ширину viewport.

Элементы на всю высоту страницы: vh > %

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

Используя vh добиться такого эффекта достаточно просто:

Example { height: 100vh; }

Вне зависимости от того как как вложен элемент.example его размеры могут быть заданы относительно размеров области просмотра. Проблема прокрутки не потревожит нас так как большинство сайтов не имеют горизонтального скроллбара

Вот несколько примеров того, как можно использовать единицы измерения vh.

Полноэкранные фоновые изображения

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

Bg { position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; }

Аналогичным образом мы можем сделать эффект «страниц», задав каждому разделу размеры области просмотра.

Section { width: 100%; height: 100vh; }

Мы можем использовать JavaScript чтобы создать иллюзию перелистывания страниц.

$("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("up")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos }, 1000); })

Складывающееся изображение

Vh может также использоваться для контроля размера изображения в пределах страницы. Например, в рамках статьи. Мы хотим убедиться, что любое изображение будет показано полностью независимо от размера экрана.

Нам понадобится следующий код

Img { width: auto; /* Автоматическая ширина для пропорциональности высоты */ max-width: 100%; /* Не больше ширины родительского элемента */ max-height: 90vh; /* Не превышая высоту viewport */ margin: 2rem auto; }

Поддержка браузерами

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

Вот как их можно решить.

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

Что такое em?

В CSS единица измерения em равна текущему размеру шрифта элемента, к которому применяется em . Когда единицы измерения em используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют его от родителей, вплоть до корневого элемента документа.

Посмотрите на следующий код CSS :

Example { font-size: 20px; }

В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size ) будет равен 20px . Так что, если мы добавим строку:

Example { font-size: 20px; border-radius: .5em; }

Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5 ). Аналогично:

Example { font-size: 20px; border-radius: .5em; padding: 2em; }

Значение отступа 2em будет равно 40px (20 * 2 ). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.

Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px . Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.

Изменение размеров уровней компонента

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

Метод работает следующим образом: используется свойство font-size , которое создает основную единицу для различных элементов внутри модуля. Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.

Давайте посмотрим на это в действии:

Посмотреть демо

Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме . Слайдер содержит одно значение корневого элемента компонента: значение font-size .

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

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

Обратите внимание, что:

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

Некоторые замечания, упущения и т.д .

Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.

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

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

Что насчет rem и Sass?

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

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

Заключение

Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS .

Перевод статьи “The Power of em Units in CSS ” был подготовлен дружной командой проекта .

16 июня 2011 в 10:49

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

• CSS

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

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

• дюймы (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.

Единицы измерения CSS играют важную роль в создании сайтов и задании размеров различных элементов. Значения CSS могут быть выражены положительными или отрицательными числами, хотя некоторые свойства принимают только положительные числа. Числовое значение сопровождается двухбуквенной аббревиатурой, которая обозначает фактическую единицу длины. Например, cm (сантиметры ), px (пиксели ) или em CSS . Исключением из этого правила является значение 0 (ноль ), для которого не требуется указывать единицу измерения.

Единицы измерения CSS бывают двух типов: абсолютные и относительные.

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

Абсолютные единицы измерения CSS не подходят для веб-дизайна. Они представляют собой цифровое обозначение результатов измерений в физическом мире и не зависят от размера и разрешения экрана. Абсолютные длины с одним и тем же значением могут отличаться на разных экранах. Это вызвано различием DPI экрана (точек на дюйм ).

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

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

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

Большинство абсолютных единиц длины бесполезны в интернете. Единственным исключением является px. Пиксели являются относительными единицами по отношению к разрешению экранов. Для принтеров и мониторов с очень высоким разрешением один пиксель в CSS равняется нескольким пикселям на экране, так что число px на дюйм составляет около 96. Пиксель является наименьшей единицей измерения и обычно используется в качестве ориентира для других.

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

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

Относительные единицы, зависящие от шрифта

Относительные единицы измерения, зависящие от шрифта, ссылаются на заранее установленный размер шрифта или значение свойства font-family :

• ex (высота символа x );
• ch (ширина символа ноль (0) );
• единица измерения em в CSS (высота шрифта текущего элемента );
• rem (размер шрифта корневого элемента ).

ex

Определяется как “высота символа x текущего шрифта ИЛИ половина 1 em ”. То есть высота строчной буквы x установленного шрифта. При изменении значения свойства font-family единица измерения ex изменяется.

ch

Равна ширине символа 0 . Эта единица измерения также меняется при изменении значения свойства font-family .

em

Единица измерения em CSS имеет значение, равное размеру шрифта основного или родительского элемента. Например, если размер шрифта родительского элемента 30px , то значение 1em будет вычисляться как 30px (30 х 1 ) для всех дочерних элементов. Число не обязательно должно быть целым. Если в примере заменить 1em на 0,5, то значение будет 15px (30 х 0,5 ).

Единица измерения em принимает значение родительского тега. Это может привести к нежелательным результатам при использовании вложенных друг в друга элементов.

Допустим, что у нас есть три вложенных друг в друга элемента. Первый элемент (корневой ) имеет размер шрифта 30px , а два вложенных элемента — шрифт в 2em . Элемент, вложенный в корневой, будет иметь размер шрифта, вычисляемый как 60px (30 х 2 ). А элемент, вложенный в него, будет иметь размер шрифта, вычисляемый как 120px (60 х 2 ).

rem

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

Процентные единицы измерения длины, зависящие от размеров области просмотра

Область просмотра основывается на ширине и высоте окна просмотра и включает в себя:

• vh (высота окна просмотра );
• vw (ширина окна просмотра );
• vmin (наименьшее из (vw, vh ) );
• vmax (наибольшее из (vw, vh ) ).

vw

Это ширина области просмотра. 1vw равен 1/100 ширины окна просмотра. Немного похоже на проценты, за исключением того, что значение остается неизменным для всех элементов независимо от ширины их родительских элементов. Например, если ширина окна 1000px , то 1vw будет равен 10px .

vh

То же самое, что и vw (ширина окна просмотра ), только данная единица измерения зависит от высоты области просмотра. 1vh равен 1/100 высоты просмотра. Например, если высота окна браузера 900px , то 1vh будет 9рх .

vmin

Vmin равно 1/100 от минимального значения между высотой и шириной области просмотра. Другими словами, 1/100 стороны с наименьшей длиной. Например, если размеры окна 1200 на 800 пикселей , то значение vmin будет равно 8px .

vmax

vmax равно 1/100 от максимального значения между высотой и шириной окна просмотра. Другими словами, 1/100 стороны с наибольшей длиной. Например, если размеры были 1200 на 800 пикселей , то vmax равно 12px .

Проценты %

Расстояние, заданное в процентах, зависит от длины родительского элемента. Например, если родительский элемент шириной 1000px , а его дочерний элемент — 50% от этого значения, то ширина дочернего элемента будет 500px .

ПОДДЕРЖКА БРАУЗЕРАМИ

em CSS, ex, px, cm, mm, in, pt, и pc

поддерживаются во всех браузерах, в том числе и в старых версиях IE .