Я слышал, что вы должны определять размеры и расстояния в своей таблице стилей с помощью em, а не в пикселях. Итак, вопрос в том, почему я должен использовать em вместо px при определении стилей в…

Одно правило CSS, которое я узнал, состоит в том, что вы должны использовать относительную единицу размера шрифта em вместо абсолютной pt. Общая идея состоит в том, чтобы установить размер шрифта в…

В чем разница между px , em и ex ? А когда вы определяете размер шрифта в CSS, используете ли вы px , pt или em ?

В чем разница между px и em?

У меня есть следующий скрипт, который преобразует px в em: perl -p -i -e ‘s/(\d+)px/($1\/16).em/ge’ stylesheet.css Однако, когда я настраиваю его, чтобы преобразовать em в px, он не работает хорошо:…

Прочитав несколько статей в Интернете, я немного запутался, когда использовать percent , em или px для div´s , input´s , font´s , buttons и так далее… Для сайта, над которым я работаю, мы хотим…

Как преобразовать pt в em? Как я использую Photoshop для разработки шаблонов. Программное обеспечение имеет формат pt для размера текста. Затем я должен передать детали дизайна разработчикам, и им…

Я пытаюсь получить коэффициент конверсии для конкретной страницы в Google Analytics. Я ищу результаты, подобные тем, которые вы получаете при использовании Behavior > Site Content > Landing Pages….

Когда я перехожу в раздел Landing pages раздела Google Analytics (Поведение > Контент сайта > целевые страницы), я вижу имя моей цели (коэффициент конверсии цели 1), то есть процент посещений,…

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

Таблица соответствия размеров шрифтов в CSS — Браузеры

Не важно каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимость посмотреть, какое значение соответствует текущему в другой системе единиц (например, какому размеру в px или %, будет соответствовать шрифт, размером 1.4 em) или быстро перевести одни размеры в другие.

Чтобы это было просто, предлагаю держать для таких случаев перед глазами (или в закладках) следующую таблицу соответствия размеров шрифтов.

Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body в 16px.

Обновление от 23.05.2015: для более детального понимания единиц измерения в CSS появился визуальный сервис CSS Ruler

Ссылки

ВКонтакте

Twitter

Facebook

Одноклассники

Linkedin

Telegram

WhatsApp

Chrome CSS Firefox Internet Explorer Opera Safari Документация Юзабилити

Подробное объяснение px, em, rem в css

Введение в концепцию:

1. px (пиксель, пиксель):

Это виртуальная единица длины, единица длины цифрового изображения компьютерной системы. Если пиксели необходимо преобразовать в физическую длину, необходимо указать точность DPI (точек на дюйм, пикселей на дюйм). Как правило, DPI не является обязательным при сканировании и печати. В системе Windows по умолчанию установлено 96 точек на дюйм, а в системе Apple — 72 точки на дюйм.

2. em (единица относительной длины относительно размера шрифта текста в текущем объекте):

Это относительная единица длины, первоначально относящаяся к ширине буквы M, отсюда и название em. Теперь он относится к кратной ширине символа, использование аналогично процентному соотношению, например 0.8em, 1.2em, 2em и т. Д. Обычно 1em = 16 пикселей.

3. pt (пункт, фунт):

Это единица физической длины, которая составляет 72 дюйма дюйма. pt = 1/72 (дюйм), px = 1 / dpi (дюйм)

4. rem (корень em, корень em):

Это новая относительная единица CSS3, которая привлекла всеобщее внимание. В чем разница между этим устройством и em? Разница в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, но относительным является только корневой элемент HTML. Можно сказать, что этот модуль обладает преимуществами относительного и абсолютного размеров. Благодаря ему все размеры шрифтов можно регулировать пропорционально только путем изменения корневого элемента, и можно избежать цепной реакции послойной комбинации размера шрифта. В настоящее время rem поддерживают все браузеры, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение также очень простое — написать объявление абсолютной единицы. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.

1. Проблема em и px

Что такое px?

px пиксели (пиксель). Единица относительной длины. Пиксель px относится к разрешению экрана монитора. (Цитируется из руководства CSS2.0)
em — единица относительной длины. Относительно размера шрифта текста в текущем объекте. Если текущий размер шрифта текста в строке не был установлен вручную, он соответствует размеру шрифта браузера по умолчанию. (Цитируется из руководства CSS2.0)
Функции PX

1. IE не может настроить размер шрифта, который использует пиксель как единицу измерения;
2. Причина, по которой большинство зарубежных веб-сайтов можно настраивать, заключается в том, что они используют em или rem в качестве единицы шрифта;
3. Firefox может настраивать px, em и rem, но более 96% китайских пользователей сети используют браузер IE (или ядро).

Что это такое?

em обозначает высоту шрифта. Высота шрифта по умолчанию любого браузера составляет 16 пикселей. Следовательно, нескорректированные браузеры соответствуют: 1em = 16px. Тогда 12px = 0,75em, 10px = 0,625em. Чтобы упростить преобразование font-size, вам нужно объявить Font-size = 62,5% в селекторе тела в css, что делает значение em 16px * 62,5% = 10px, поэтому 12px = 1.2em, 10px = 1em, также Другими словами, вам нужно только разделить исходное значение в пикселях на 10, а затем заменить его на em в качестве единицы.

em особенности:

1em относится к размеру шрифта, он наследует размер шрифта родительского элемента, поэтому это не фиксированное значение. Размер шрифта по умолчанию любого браузера составляет 16 пикселей. Следовательно, 12px = 0,75em. В практических приложениях, чтобы облегчить преобразование, стили обычно устанавливаются следующим образом:
Код CSS

html { font-size: 62.5%; }

Таким образом, 1em = 10px. Теоретически размер 1.2em, который мы обычно используем, составляет 12 пикселей. Однако это преобразование недопустимо в браузере IE. 1.2em будет немного больше 12 пикселей. Решение состоит в том, чтобы изменить стиль тега html с 62,5% на 63%, а именно:
Код CSS

html { font-size: 63%; }

В китайских текстах обычно бывает два пробела в начале абзаца. Если вы используете пиксель в качестве единицы измерения, вам нужно оставить 24 пикселя для шрифтов 12 пикселей и 28 пикселей для шрифтов 14 пикселей … Это преобразование очень необычно. Если используется единица em, эта проблема может быть решена очень хорошо: размер одного слова — 1em, а размер двух слов — 2em. Поэтому просто определите это так:
Код CSS

p { text-indent: 2em; }

Разница между шрифтовыми единицами em и px

Блок шрифта должен использовать em вместо px. Причина в том, что он поддерживает масштабирование шрифта в IE6. Нажмите ctrl + wheel на странице, и веб-сайт, шрифт которого в px, не отвечает. px — это абсолютная единица измерения и не поддерживает масштабирование IE, em — относительная единица.
Когда я настраивал этот блог, я обнаружил, что не только шрифт, но и единицы высоты строки и высоты по вертикали — em. Обеспечьте целостность при масштабировании.

em имеет следующие характеристики:

1. Значение em не фиксировано;
2. em унаследует размер шрифта родительского элемента.

Em, переписывая шаги:

1. Селектор тела объявляет размер шрифта = 62,5%;
2. Разделите исходное значение в пикселях на 10 и замените его на em в качестве единицы;
   Проще говоря, если вам нужны только два вышеуказанных шага для решения проблемы, никто не может использовать px. После двух шагов, описанных выше, вы обнаружите, что шрифт вашего веб-сайта выходит за рамки воображения. Поскольку значение em не фиксировано и наследует размер родительского элемента, вы можете установить размер шрифта в div содержимого равным 1,2em, что составляет 12 пикселей. Затем вы устанавливаете размер шрифта селектора p равным 1.2em, но если p является дочерним элементом содержимого, размер шрифта p не равен 12px, а 1.2em = 1.2 * 12px = 14.4px. Это связано с тем, что размер шрифта содержимого установлен на 1,2em, это значение em наследует размер тела его родительского элемента, который составляет 16 пикселей * 62,5% * 1,2 = 12 пикселей, а p — его дочерний элемент, em наследует высоту шрифта содержимого , Что составляет 12 пикселей. Таким образом, 1.2em p больше не 12px, а 14.4px.
3. Пересчитайте значения em для увеличенных шрифтов. Избегайте повторного объявления размера шрифта, то есть избегайте явления 1,2 * 1,2 = 1,44, упомянутого выше. Например, если вы объявляете размер шрифта 1.2em в #content, то при объявлении размера шрифта p вы можете использовать только 1em вместо 1.2em, потому что этот em не тот em и наследует высоту шрифта #content. Он становится 1em = 12px.

12px китайские иероглифы в IE:

При завершении преобразования em было обнаружено странное явление, то есть размер 12 пикселей (1,2 em) китайских иероглифов, полученных указанным выше методом, не равен размеру шрифта, определенному напрямую с помощью 12 пикселей в IE, а немного больше. Вам нужно всего лишь изменить 62,5% на 63% в селекторе тела, чтобы оно отображалось нормально. Причина может заключаться в том, что когда IE обрабатывает китайские символы, точность значений с плавающей запятой ограничена. Это явление встречается только в китайских иероглифах размером 12 пикселей, а в английском такого явления нет. Решение — заменить 62,5% в style.css на 63%.

Инструмент преобразования единиц измерения px, em, pt:

адрес:http://pxtoem.com/

2. Особенности rem

Rem — это новая относительная единица (root em) в CSS3, которая привлекла всеобщее внимание. В чем разница между этим устройством и em? Разница в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, но относительным является только корневой элемент HTML. Можно сказать, что этот модуль обладает преимуществами относительного и абсолютного размеров. Благодаря ему все размеры шрифтов можно регулировать пропорционально только путем изменения корневого элемента, и можно избежать цепной реакции послойной комбинации размера шрифта. В настоящее время rem поддерживают все браузеры, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение также очень простое — написать объявление абсолютной единицы. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.
Пример:

p {font-size:14px; font-size:.875rem;}

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

3. Таблица преобразования шрифтов

Перевод единиц измерения CSS — пиксели, типографский пункт, относительные — онлайн калькулятор

СSS (Каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

• Проценты % : использование единицы Процент позволяет увеличивать/уменьшать свой текст для удобства чтения. Текущий размер шрифта равняется 100% (т.е. 12pt = 100%).
• Px — это единицы фиксированного размера, которые используются для всего, что читается на компьютерном экране. Один пиксель равняется одной точке на компьютерном экране (это наименьшее деление разрешения экрана). Пиксель — самая базовая, абсолютная и окончательная единица измерения. Все значения браузер в итоге пересчитает в пиксели.
• EM — это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt, то 1em равняется 12pt. Поскольку em масштабируется, то 2em равняется 24pt, 5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.
• EX – аргумент, определяющий в нижнем регистре высоту элемента х. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.

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

Новые и старые единицы измерения (краткий обзор) — 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. Это тоже может быть интересно:

Какие единицы измерения CSS выбрать. Что лучше, проценты, пиксели, em и т.д.

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

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

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

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

• Высота шрифта текущего элемента (em),
• Высота буквы x (ex),
• Пиксели (px),
• Проценты (%).

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

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

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

Преобразование размера шрифта px-pt-em-rem-percent

Рекомендуемые шрифты

Обычно рекомендуется разрешить устройству / браузеру принимать базовые решения о размере шрифта. Насколько я видел, они обычно по умолчанию равны 16px.

  html {
  семейство шрифтов: без засечек;
  высота строки: 1,5;
}  

Свойство text-rendering: optimizeLegibility было удалено из-за предполагаемых проблем с производительностью в браузерах Android.

Адаптивная типографика

Responsive Typography прямо противоречит этому совету, поскольку он напрямую манипулирует корневым размером шрифта, и для масштабируемой типографики это правильный путь. В этом вам поможет калькулятор размера шрифта, реагирующий на жидкости.

Размер шрифта

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

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

Шрифтовые блоки

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

Кэтлин МакМахон подробно рассказала, почему мы должны использовать относительные единицы в CSS при установке шрифта. Пиксели и относительные единицы в CSS: почему это все еще важно.

Медиа-запросы

Zell есть лучший совет, который я читал для кроссбраузерных, доступных, медиа-запросов, и он заключает, что использует единицы em , а не rems или пиксели.

Длина линии

Лично я очень осторожен с высотой и длиной / шириной линий.Идеальная ширина строки для сканирования или чтения остается неизменной и составляет 45–75 символов для абзацев, что соответствует примерно 34em (544 пикселей).

Высота линий

Высота линий должна увеличиваться при уменьшении ширины, что звучит нелогично. С базовым значением line-height: 1.5 он будет меняться только на ± 0,065 между 320 пикселей (20rem @ 16px) и 544px (34em @ 16px), поэтому, если вы не перфекционист, его можно игнорировать.

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

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

Matej Latin есть статья, в которой, среди прочего, рассматривается вертикальный ритм.

Кодировка шрифта

Всегда убедитесь, что высота не установлена ​​для текстовых блоков. В любом случае используйте min-height , но если пользователь увеличивает размер шрифта на 200%, для доступности фиксированная высота, вероятно, обрежет текст, и страница не пройдет WCAG.

Избегайте пикселей! Почему? Посмотрите, что пиксели мертвы.

Третьи посетителей нуждаются в очках!

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

пикселей — em -% — pt — ключевое слово

Когда дело доходит до установки размера шрифта в CSS, у вас есть множество вариантов. Вы можете применить «ключевое слово», например p {font-size: small; } или числовое значение.При использовании значения вам необходимо объявить единицу измерения, у которой есть четыре варианта. Что лучше? Конечно, это зависит от обстоятельств. Давайте посмотрим:

Ключевое слово

Допустимые параметры для установки размера шрифта в ключевом слове: xx-small, x-small, small, medium, large, x-large и xx-large , а также относительные ключевые слова меньше и больше .

Как это ни удивительно, размер ключевых слов одинаков для разных браузеров и платформ.См. Ниже тестовую страницу в Opera, Firefox, IE 6 и Safari:

Обратите внимание, что хотя они довольно близки, есть различия в том, где разрываются строки, и в общей высоте абзаца.

Только когда используется одно из ключевых слов относительного размера, включается «каскад», и размер шрифта родительского элемента влияет на дочерний элемент. Например, если для родительского было задано значение , средний , а для дочернего было установлено значение большой .Только большой будет использоваться для определения размера дочернего элемента. Однако, если родительский элемент был установлен на средний , а дочерний был установлен на больше (обратите внимание, большой r не только большой), дочерний элемент будет «увеличен», чтобы быть больше, чем родители. размер шрифта. Измените родителя, измените потомка, отсюда «каскад».

Ключевые слова — отличный способ изменить размер шрифтов в Интернете. Один из наиболее популярных методов — установить ключевое слово font-size в элементе body, а затем использовать относительный размер шрифта в любом месте страницы.Это дает возможность действительно легко увеличивать или уменьшать размер шрифта на странице (например, с помощью JavaScript) и последовательно перемещать всю страницу вверх и вниз.

Однако ключевые слова не обеспечивают детального контроля над вашей типографикой, так как выбор довольно ограничен.

пикселей

Если вам нужен детальный контроль, размер шрифтов в пикселях (px) — отличный выбор (мой любимый). На экране компьютера точность не может быть выше одного пикселя.Изменяя размер шрифта в пикселях, вы буквально говорите браузерам, что нужно отображать буквы в высоту в пикселях:

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

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

«Больше» увеличил размер 16 пикселей родительского элемента до 20 пикселей, что на 25% больше.

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

Установка размера шрифта в пикселях является наиболее точным (и я считаю наиболее удовлетворительным) методом, но при этом следует принимать во внимание количество посетителей, все еще использующих IE 6 на вашем сайте, и их потребности в доступности.Мы находимся на переднем крае того, что нам больше не нужно об этом заботиться.

см

Em, вероятно, являются наиболее сложными для понимания старой лапши, вероятно, потому, что само их понятие абстрактно и произвольно. Вот совок: 1em равен текущему размеру шрифта рассматриваемого элемента. Если вы нигде на странице не установили размер шрифта, то это будет значение по умолчанию для браузера, которое, вероятно, составляет 16 пикселей. Так что по умолчанию 1em = 16px. Если бы вы установили размер шрифта на теле 20 пикселей, то 1em = 20 пикселей.

Исторически я считаю, что значение «em» основано на ширине заглавной буквы M, но не цитируйте меня по этому поводу.

С ними все становится немного сложнее, когда мы начинаем настраивать более сложный размер шрифта. Скажем, нам нужен заголовок с большим размером шрифта, поэтому мы устанавливаем h2 {font-size: 2em; } Эта «2» по сути является множителем текущего значения em. Итак, если текущий размер em составляет 16 пикселей, этот тег заголовка будет иметь размер 32 пикселя. Эта математика работает чисто, но вы можете себе представить, что часто это не так, и необходимо округление.

Самый популярный метод работы со значениями em — установить размер шрифта body на 62,5%. Поскольку размер шрифта в браузере по умолчанию составляет 16 пикселей, это делает его 10 пикселей (без жесткой настройки 10 пикселей, которая не будет каскадной). Использовать 10 в качестве множителя намного проще, чем использовать 16. Таким образом, вам нужен размер шрифта 18 пикселей? Используйте font-size: 1.8em.

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

1. Размер ARE изменяемый в IE 6
2. Отношение к другим размерам (узлы эластичной ширины)
3. Каскад Эма как mo-fo

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

Em используются не только для шрифтов, это единица измерения, которую можно использовать для любой другой длины (высоты, ширины и т. Д.). Сайты с эластичной шириной используют значения em для всего, что, по сути, делает сайт «масштабируемым», что означает, что когда вы увеличиваете размер шрифта, все увеличивается до ширины сайта. Таким образом, у Эм есть прямые отношения друг с другом. Если у вас есть поле высотой 10 em и шрифт внутри размером 1 em, он будет занимать ровно 1/10 высоты этого поля.Это точное пропорциональное соотношение делает ценности em мощным средством веб-дизайна.

У них есть одна потенциальная проблема, касающаяся №3. Они действительно каскадом. Каждое значение em относительно родительского значения. Если вы используете em как прямую замену значений пикселей, это может вызвать проблемы. Например, вы можете установить размер шрифта «p» (абзац) и «li» (элемент списка) равным 1,2em. Выглядит отлично сегодня, но завтра на сайте будет опубликован какой-то контент, в котором есть абзац внутри элемента списка.Эти два значения будут каскадными (1,2 x 1,2), и этот элемент списка будет больше по размеру шрифта, чем любой из других. Никакого другого пути, кроме удаления тега.

%

Проценты довольно очевидны в том, как они работают. То есть они работают так, как вы думаете. Если у родителя размер шрифта 20 пикселей, а у дочернего элемента размер шрифта 50%, он будет равен 10 пикселям. Так же, как и у них, сама природа процентного размера такова, что она относительна. Он также каскадируется таким же образом, поэтому проблема, описанная выше для элемента списка и элемента абзаца, применима и здесь.

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

пт

Последняя единица измерения, в которой можно указать размеры шрифта, — это значения в пунктах (pt). Баллы предназначены только для печати CSS! Точка — это единица измерения, используемая в реальной типографике, написанной чернилами на бумаге. 72 балла = один дюйм. Один дюйм = один дюйм реальной линейки. Ни дюйма на экране, что абсолютно произвольно в зависимости от разрешения.

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

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

css — Что лучше использовать: pt или px?

Взгляните на эту отличную статью на сайте CSS-Tricks:

Взято из статьи:

пт

Последняя единица измерения, в которой можно указать размеры шрифта, — это значения в пунктах (pt). Баллы предназначены только для печати CSS! Точка — это единица измерения, используемая в реальной типографике, написанной чернилами на бумаге.72 балла = один дюйм. Один дюйм = один дюйм реальной линейки. Ни дюйма на экране, что абсолютно произвольно в зависимости от разрешения.

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

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

пикселей

Если вам нужен мелкозернистый элемент управления, размер шрифтов в пикселях (px) — отличный выбор (мой любимый вариант).На экране компьютера он не может быть более точным, чем один пиксель. Изменяя размер шрифта в пикселях, вы буквально говорите браузерам, что нужно отображать буквы в высоту в пикселях:

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

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

«Больше» увеличил размер 16 пикселей родительского элемента до 20 пикселей, что на 25% больше.

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

Установка размера шрифта в пикселях является наиболее точным (и я считаю наиболее удовлетворительным) методом, но при этом следует принимать во внимание количество посетителей, все еще использующих IE 6 на вашем сайте, и их потребности в доступности.Мы находимся на переднем крае того, что нам больше не нужно об этом заботиться.

css — Почему em вместо px?

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

Как указали Хенрик Пол и другие, em пропорционально размеру шрифта, используемому в элементе.Распространенной практикой является определение размеров блочных элементов в пикселях, однако изменение размера шрифтов в браузерах обычно нарушает этот дизайн. Изменение размера шрифтов обычно выполняется с помощью сочетаний клавиш Ctrl + + или Ctrl + - . Так что хорошей практикой будет использовать вместо них em.

Использование пикселей для определения ширины

Вот наглядный пример. Допустим, у нас есть div-тег, который мы хотим превратить в стильное окно даты, у нас может быть HTML-код, который выглядит так:

  

    
 июль 
    
 4 

  

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

  * {маржа: 0; отступ: 0; }

п.месяц {font-size: 10pt; }

p.day {размер шрифта: 24pt; font-weight: жирный; }

div.date-box {
    цвет фона: # DD2222;
    семейство шрифтов: Arial, sans-serif;
    цвет белый;
    ширина: 50 пикселей;
}
  

Проблема

Однако, если мы хотим увеличить размер текста в нашем браузере, дизайн сломается. Текст также будет выходить за пределы поля, что почти то же самое, что происходит с дизайном SO, как указывает flodin. Это потому, что поле останется того же размера по ширине, поскольку оно заблокировано до 50 пикселей .

Использование em вместо

Более разумный способ — вместо этого определить ширину в EMS:

  div.date-box {
    цвет фона: # DD2222;
    семейство шрифтов: Arial, sans-serif;
    цвет белый;
    ширина: 2,5 мм;
}

* {маржа: 0; отступ: 0; размер шрифта: 10pt; }

// Начальная ширина поля даты = 10 pt x 2,5 em = 25 pt
// Также будет работать, если вы использовали px вместо pt
  

Таким образом, у вас будет плавный дизайн на поле даты, то есть размер поля будет увеличиваться вместе с текстом пропорционально размеру шрифта, определенному для поля даты.В этом примере размер шрифта определен в * как 10pt и будет увеличиваться в 2,5 раза по сравнению с этим размером шрифта. Поэтому, когда вы изменяете размер шрифтов в браузере, размер поля будет в 2,5 раза больше этого размера шрифта.

единиц CSS — px, em, cm, vw, in, ex, pt, pc — TutorialBrain

На главную »CSS» Единицы CSS

CSS Units содержит различные единицы измерения длины.

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

На более высоком уровне единицы могут иметь —

1. Числовые значения — Длина имеет номер, за которым следует единица измерения, например 10px , 5 мм , 8in и т. Д. Между число и единица измерения, то есть 4 px неверны, потому что между 4 и px есть пробел
2. Проценты — Значение будет в процентах, например 70%, 30% и т. д.

нижний уровень, единицы состоят из —

1. Абсолютная длина — Фиксированное значение длины
2. Относительная длина — Длина относительно устройства

Давайте разберемся с обоими подробно.

Абсолютные длины — это те единицы длины, значение которых фиксировано для всех устройств.

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

широко используемые единицы абсолютной длины —

1. px — Подставки для пикселей
2. pt — Полная форма — точек
3. pc — Сокращение для Picas
4. в — Подставки для дюймов
5. см — Полная форма для сантиметров
6. мм — Сокращение для миллиметров
7. q — Стенды для четверть миллиметра (редко используется на веб-сайтах)

Предупреждение / Примечание / Информация Абсолютные единицы, такие как pt , pc , in , cm , мм и q , могут незначительно отличаться на экранах с низким разрешением (менее 200 точек на дюйм), но они не будут меняться на экранах с высоким разрешением ( более 200 точек на дюйм).
Хотя пикселей специально разработан для размера шрифта CSS, и это исключение для абсолютной длины. Его длина зависит от типа устройства, поэтому он подходит для отображения на экранах компьютеров. × Закрыть оповещение

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

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

96 пикселей = 1 дюйм

Синтаксис длины «px»:
property_type: mpx ;

Где « м» может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 5 пикселей;
высота: 10 пикселей;
поле: 3 пикселя;

Пример длины в пикселях (px)

 .p-px {
 размер шрифта: 15 пикселей;
 цвет: зеленый;
}
 

pt означает точки .

W3C не рекомендует использовать единицы измерения длины точек для экрана дисплея, но рекомендует это для таких печатающих устройств, как принтеры.

12pt = 1шт

Синтаксис длины pt:
property_type: xpt ;

Где « x» может быть любым числовым значением с десятичным или без десятичного.

Например:
width: 72pt;
высота: 12pt;

Пример длины в пунктах (pt)

.p-pt {
 размер шрифта: 20pt;
 цвет: зеленый;
}
 

pc обозначает pica или picas.

W3C не рекомендует единицу измерения длины Пика / с для экрана дисплея, но рекомендует это для таких печатающих устройств, как принтеры.

1 шт. = 12 точек
6 шт. = 2,54 см
6 шт. = 1 дюйм

Синтаксис длины «pc»:
property_type: npc ;

Где « n» может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 6шт;
высота: 1шт;

Пример длины в пике (шт.)

 .p-pica {
 размер шрифта: 3шт;
 цвет: зеленый;
}
 

см означает сантиметр . Он широко используется для повседневного использования, но меньше используется при разработке веб-сайтов.

W3C не рекомендует использовать единицу измерения длины в сантиметрах для экрана дисплея, но рекомендует это для таких печатающих устройств, как принтеры.

1 см = 10 мм
2,54 см = 1 дюйм

Синтаксис длины «см»:
property_type: acm ;

Где « a» может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 3 см;
высота: 2,5 см;

Пример длины в сантиметрах (см)

 .p-cm {
 размер шрифта: 1см;
 цвет: зеленый;
}
 

мм означает мм .Это 1/10 сантиметра

W3C не рекомендует использовать единицу длины в миллиметрах для экрана дисплея, но рекомендует это для таких печатающих устройств, как принтеры.

10 мм = 1 см
25,5 мм = 1 дюйм

Синтаксис длины в мм:
property_type: bmm ;

Где « b» может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 20 мм;
высота: 15 мм;

Пример длины в миллиметрах (мм)

.p-mm {
 размер шрифта: 4 мм;
 цвет: зеленый;
}
 

в означает дюйма .

W3C не рекомендует использовать дюймовые единицы для экрана дисплея, но рекомендует это для таких печатающих устройств, как принтеры.

1 дюйм = 96 пикселей
1 дюйм = 2,54 см

Синтаксис длины «in»:
property_type: zin ;

Где « z » может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 0,5 дюйма;
ширина границы: 0,1 дюйма

Пример длины в дюймах (дюймах)

 .p-in {
 размер шрифта: 0,5 дюйма;
 цвет: зеленый;
}
 

Соотношение между дюймами, см, мм, pt, pt и пикселями

1 дюйм = 2,54 см = 25,4 мм = 72 точки = 6 шт. = 96 пикселей

Как следует из названия, Относительные единицы длины — это те длины, которые относятся к другой длине.

Относительные длины — это те единицы длины, значения которых НЕ фиксированы для всех устройств.

Относительная длина подходит для экранов с низким разрешением, таких как экраны компьютеров.

Широко используются единицы относительной длины —

1. em — относительно font-size текущего элемента
2. ex — относительно высоты шрифта
3. % — относительно родительского элемента в процентах
4. ch — относительно ширины цифры «0»
5. rem — Разбейте его как r + em i.е. Корень em . Относительно размера шрифта корневого элемента документа HTML
6. vw — относительно 1% ширины области просмотра (размер браузера)
7. vh — относительно 1% высоты области просмотра (размер браузера)
8. vmin — Относительно 1% ширины или высоты области просмотра, в зависимости от того, что меньше между vw и vh
9. vmax — Относительно 1% ширины или высоты области просмотра, в зависимости от того, что больше между vw и vh

em не имеет полной формы.Это единица измерения относительно размера шрифта текущего элемента, поэтому она может быть разной для каждого элемента HTML-документа.

Предположим, у вас есть элемент с размером шрифта 2 см, тогда 1em для этого элемента будет 2 см. Точно так же, если у вас есть другой элемент с размером шрифта 3 дюйма, то 1em для этого элемента будет 3 дюйма.

Для больших экранов размер шрифта будет больше, а для маленьких экранов размер шрифта будет относительно меньше.

Это единственное устройство, которое W3C рекомендует для экрана дисплея, а также для таких печатающих устройств, как принтеры.

Единица em обычно используется с padding , margin , text-indent и т. Д.

Синтаксис единицы:
property_type: aem ;

Где « a » может быть любым числовым значением с десятичным или без десятичного.

Например:
отступ текста: 3em;
маржа: 2 на

 div {
 размер шрифта: 40 пикселей;
 фон: красный;
}
.a {
 размер шрифта: 1em;
 ширина: 8em;
 фон: желтый;
}
.b {
 размер шрифта: 0.5em;
 фон: синий;
}
 

Предупреждение / Примечание / Информация Если вы не укажете размер шрифта для текущего элемента, то 1 см будет примерно равен 2.37em, то есть 1cm = 2.37em и 1em = 16px (по умолчанию) × Закрыть оповещение

Пример единицы ’em’, когда размер шрифта текущего элемента не установлен

 .p-cm {
 размер шрифта: 1см;
 цвет: зеленый;
}
.p-em {
 размер шрифта: 2.37em;
 цвет: зеленый;
}
.p-px {
 размер шрифта: 37,92 пикселей; /*2,37 * 16 пикселей * /
 цвет: зеленый;
}
 

Единицы измерения ex относятся к высоте шрифта по оси x.

Высота x аналогична высоте строчных букв, таких как x, a, c, m, или o , которые имеют одинаковый размер.

Это редко используется, и W3C не рекомендует это для экранов дисплеев, а также для принтеров.

Синтаксис длины ex:
property_type: bex ;

Где «b » может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 2ex;

 p {
 высота строки: 16 пикселей;
 размер шрифта: 40 пикселей;
 маржа: 15 пикселей;
}

отметка {
 размер шрифта: 1ex;
}
   
охватывать {
 размер шрифта: 2ex;
}
 

Единица % относительно родительского элемента в процентах.

Допустим, ширина родительского элемента текущего элемента составляет 100 пикселей. Теперь, если вы определите ширину текущего элемента как 80%, тогда значение ширины будет 0,8 * 100 пикселей = 80 пикселей.

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

Синтаксис длины «%»:
property_type: x% ;

Где « x» может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 20%;

 .parent {
 размер шрифта: 50 пикселей;
 фон: желтый;
}

.ребенок {
 размер шрифта: 60%;
 фон: зеленый;
}
 

Блок ch соответствует ширине числа «0».

Синтаксис длины «ch»:
property_type: ych ;

Где « y » может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 2 канала;

 body {
 размер шрифта: 40 пикселей;
 фон: серый;
}

.a {
 размер шрифта: 1 канал;
 фон: зеленый;
}

.b {
 размер шрифта: 2ch;
 фон: синий;
}

.c {
 размер шрифта: 3ch;
 фон: оранжевый;
}
 

Блок rem — это корень em . Он соответствует размеру шрифта по умолчанию корневого элемента HTML-документа.

Итак, если размер шрифта корневого элемента составляет 18 пикселей, тогда 1rem = 18px , что будет одинаковым для всех элементов, которые определены с единицей rem .

Он стал частью CSS в 2013 году и даже лучше, чем em , но некоторые старые браузеры не поддерживают это.

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

Синтаксис единицы «rem»:
property_type: krem ​​;

Где « k » может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 5бэр;

 html {
 размер шрифта: 18 пикселей;
 фон: желтый;
}

.a {
 размер шрифта: 1 бэр;
 фон: зеленый;
}

.b {
 размер шрифта: 2rem;
 фон: синий;
}

.c {
 размер шрифта: 3rem;
 фон: оранжевый;
}
 

Предупреждение / Примечание / Информация Если вы не укажете размер шрифта для корневого элемента, то 1rem будет примерно равен 16px i.е. 1рем = 16 пикселей × Закрыть оповещение

Пример rem, когда размер шрифта корня не установлен

 .a {
 размер шрифта: 1 бэр;
}

.b {
 размер шрифта: 16 пикселей;
}

.c {
 размер шрифта: 2rem;
}

.d {
 размер шрифта: 3rem;
}
 

Единица измерения vw — это относительная единица, которая составляет 1% ширины области просмотра, а область просмотра — это размер окна браузера. Он отличается от браузеров к браузерам.

Проще говоря, это 1/100 ширины области просмотра.

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

Синтаксис длины «vw»:
property_type: xvw ;

Где « x » может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 10vw;

 .p-vw {
 размер шрифта: 8vw;
 цвет: зеленый;
}
 

Единица vh — это относительная единица, которая составляет 1% высоты области просмотра (размер окна браузера).

Проще говоря, это 1/100 высоты области просмотра.

vh не поддерживается в некоторых старых браузерах.

Синтаксис длины «vh»:
property_type: xvh ;

Где « x » может быть любым числовым значением с десятичным или без десятичного.

Например:
ширина: 10vh;

 .p-vh {
 размер шрифта: 14vh;
 цвет: зеленый;
}
 

vmin — относительная длина, которая будет минимальной vw и vh , поэтому она будет составлять 1% ширины области просмотра ( vw) , если vw меньше vh , иначе это будет 1% высоты области просмотра ( vh ).

Аналогично, vmax — это относительная длина, которая будет максимальной vw и vh , поэтому она будет составлять 1% от ширины области просмотра ( vw) , если vw больше vh , иначе это будет 1% высоты области просмотра ( vh ).

Синтаксис длины «vmin»:
property_type: avmin ;

Синтаксис длины «vmax»:
property_type: bvmax ;

Где « a » и « b » могут быть любыми числовыми значениями с десятичными или без десятичных.

Например:
ширина: 10вмин;
высота: 10vmax;

Пример длины vmin и vmax

 .vmin {
 размер шрифта: 6vmin;
 цвет: зеленый;
}

.vmax {
 размер шрифта: 6vmax;
 высота строки: 12 пикселей;
}
 

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

Например:
Если вы хотите установить отступ как 0 пикселей или 0 см и т. Д., То вы можете пропустить единицу измерения и сразу установить как 0, например, отступ : 0 или маржа: 0 .

Аналогично, для line-height: 1,8 означает, что высота текста будет в 1,8 раза больше размера шрифта, т.е. 1,8 * размер шрифта.

Примечание о том, какое устройство использовать

Не существует правила исправления, согласно которому вы должны использовать абсолютные или относительные единицы, но W3C рекомендует ниже:

• Для экранов дисплея — W3c рекомендует использовать em или пикселей или % . Вы также можете иногда использовать ex.
• Для устройств печати — W3c рекомендует использовать em , см , мм , дюйм , pt , pc , % . Иногда вы также можете использовать пикселей , ex .

Vmin CSS: единицы измерения в CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)

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

В этой статье рассматриваются относительные единицы, абсолютные единицы и единицы области просмотра.

Относительные единицы

В отличие от абсолютных единиц, таких как пиксели, точки или сантиметры, вы также можете определять размеры в относительных единицах, таких как процент, em или rem.
Относительные единицы также соответствуют стандартам доступности.
В большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей , вы можете использовать это значение в качестве основы для вычислений (например, 16 пикселей равно 1em, 1rem или 100%).

В чем разница между em и rem?

Отличие заключается в наследовании.Значение rem основано на корневом элементе ( html ). Каждый дочерний элемент использует размер шрифта html в качестве основы для расчета.

em , с другой стороны, зависит от размера шрифта родительского элемента.

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

Различные семейства шрифтов

Все шрифты имеют одинаковый размер (18 пунктов), но красная полоса указывает на то, что высота по оси x ( ex ) у шрифтов разная.

Размер шрифтов снова тот же (18pt). На этом графике сравнивается ширина символа ( ch ). Моноблочные шрифты имеют одинаковую ширину для каждого символа, тогда как шрифты с засечками или без засечек могут иметь разную ширину для каждого символа ( и уже, чем или ).

Абсолютные единицы

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

Единицы просмотра

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

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

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

Если вам нравится мой контент, вы можете подписаться на меня в Twitter ?! @fullstack_to

Изображение на обложке Уильяма Варби на Unsplash

Краткое руководство по единицам CSS (px, em, rem)

Вот несколько часто используемых модулей CSS с указанием плюсов и минусов каждого из них.

ПИКСЕЛЬ (px):
Пиксели имеют фиксированный размер. 1 пиксель = 1 точка на экране компьютера. Это абсолютная единица измерения

Плюсы:
Пиксели предпочтительнее, если мы хотим разрабатывать веб-приложения с идеальным пикселем (по своей природе не реагирующие)

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

Когда использовать?
пикселей пригодятся, особенно когда у нас есть фиксированные div, например, высота верхнего или нижнего колонтитула остается неизменной независимо от области просмотра.

ТОЧКА (pt):

баллов обычно используются для печати на бумаге, т.е. для печатных СМИ.
То же, что и пиксель.
Фиксированная мера, не масштабируемая.

EM:
EM всегда равно текущему размеру шрифта.Он масштабируемый по своей природе.

Плюсы:
Поскольку он масштабируемый, можно создавать адаптивные веб-сайты.
Если font-size равен 16px, то 1em = 16px, 0.5em = 8px и 2em = 32px.

Минусы:
Em вызывает проблему, когда у нас есть вложенные элементы.

Давайте установим корень на 100%, то есть 16 пикселей. Пусть будет ребенок, у которого должно быть 12 пикселей, поэтому мы указываем значение 0,75em. Теперь, если у нас есть еще один дочерний элемент внутри, он получит размер шрифта 0,75em из 12 пикселей, то есть 9 пикселей.Чтобы этого не произошло, нужно снова указать

html {
размер шрифта: 100%;
}
ul {
font-size: 0,75em;
}
ul ul {
font-size: 1em;
}

Нам нужно уделять много внимания вложению элементов.

ПРОЦЕНТ (%):

Процентная единица похожа на em.

Плюсы:
Как видно из названия, проц чего-то. Если ничего не указано, это займет% ширины или высоты браузера.
Полезно для построения Fluid Layout.

Минусы:
Если дочерние элементы имеют фиксированную ширину и если родительский элемент указан в%, это может привести к неожиданному макету. Нужно быть осторожным с вложенными элементами.
ПРИМЕЧАНИЕ. При увеличении базового размера% и em автоматически увеличиваются, но пиксель и pt остаются прежними.

REM:
Обозначает Root EM. REM относится только к размеру корня, тогда как em относительно его ближайшего родителя.

Плюсы:
Rem всегда учитывает размер корня, независимо от вложенности элементов.

Минусы:
Размер браузера по умолчанию для Rem составляет 16 пикселей. Следовательно, становится трудно запомнить значения rem.

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (база)
18px = 1.125rem
20px = 1,25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

2. Частичная поддержка в IE 10.

VW, VH:

Этими единицами измерения являются ширина и высота области просмотра соответственно. 1vw = 1/100 ширины области просмотра и
1vh = 1/100 высоты области просмотра.