Перевод пикселей в чем

Обновлено: 05.07.2024

В CSS существует множество единиц измерения. Обычно мы используем единицы размеров, но также есть единицы для углов — например, deg и turn , единицы времени — s и ms , единицы плотности экрана — например, dpi и dppx и другие.

Общим для всех единиц длины будет то, что для значения 0 , единицы можно не указывать: height: 0px и height: 0 будут работать одинаково, так что единицы измерения можно отбросить. Это позволяет немного быстрее писать код и считывать значения свойств.

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

cm	сантиметр	1cm = 96px/2.54 ≈ 37,795px
mm	миллиметр	1mm = 1/10 от 1cm
q	четверь миллиметра	1q = 1/40 от 1cm = 0.25mm ≈ 0.945px
in	дюйм	1in = 2.54cm = 96px
pc	пика	1pc = 1/6 от 1in
pt	пункт, точка	1pt = 1/72 от 1in
px	пиксель	1px = 1/96 от 1in, 0.75 от pt

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

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

Я попыталась разными способами получить полоску длиной 10 сантиметров. Все полоски равны друг другу, но ни одна не равна 10 сантиметрам, если приложить линейку к экрану. Проверила на двух мониторах: на одном они короче, на другом — длиннее.

На веб-страницах физические единицы измерения вроде cm , mm и in не будут работать как ожидается, потому что главная экранная единица измерения — пиксель.

Что такое пиксель и какого он размера? Чем отличаются пиксели px от точек pt ? Почему у них такие странные размеры в 1/96 дюйма и 1/72 дюйма соответственно? Как были выбраны эти значения и почему этих единиц измерения две? Попытка разобраться с мелкой точкой на экране вызывает множество вопросов и требует погружения в историю. Я попыталась выяснить как всё было, и вот что узнала.

Когда появились первые программы для предпечатной подготовки, нужно было как-то соотнести размер элементов на экране с тем, чтоб будет напечатано на бумаге. Тогда оказалось, что один дюйм (inch) на экране соответствует 72 точкам. Это соотношение зафиксировано в pt , pt — это 1/72 дюйма. Изначально это была типографская единица измерения, и её значения менялись со временем, но с появлением компьютерных программ для полиграфии значение pt пришлось стандартизировать.

С развитием технологий стало возможно делать экраны с большим разрешением, и Microsoft предложила отображать 96 точек на дюйм, что было зафиксировано в px , то есть пиксель — это 1/96 дюйма. Это позволило увеличить чёткость мелкого текста, потому что для отображения символа теперь можно было использовать больше точек.

Размер px составляет 0.75 от pt . По сути, pt — это более крупный пиксель.

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

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

При этом важно помнить, что раз CSS-пиксели уже не соответствуют физическим точкам экрана, сантиметры и дюймы при выводе на экран тоже не будут не соответствовать своим реальным размерам, об этом есть и в спецификации:

If the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

То есть, если использовать дюймы для вёрстки веб-страниц, один дюйм всегда будет равен 96 пикселям, но никогда — реальной физической единице:

Таким образом, главное в абсолютных единицах — контекст использования:

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

Пока копалась в истории единиц измерения, выяснилось, что во внутреннем коде Gecko когда-то была поддержка километров, удалили в 2009-м:

Из физических единиц ещё может представлять интерес q : это относительно новая единица, и она поддерживается не всеми браузерами. q — это 0.25mm . Как и другие физические единицы, больше имеет смысл для печати, но также можно попытаться использовать её для уменьшения размера кода: q — это примерно 0.945px , то есть в некоторых случаях вполне можно использовать её вместо пикселей, получается один символ ( q ) вместо двух ( px ).

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

Чистое безумие, конечно. Картина воспроизведена с помощью box-shadow , и мне кажется, тему рисования на CSS на этом можно закрывать.

Вес стилей демо — 4.5Mb, а если бы там вместо q были пиксели, стили весили бы на 300Kb больше.

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

Относительные единицы измерения вычисляются на основе каких-то других величин: размера шрифта или размера экрана, и могут динамически меняться вместе с ними.

Единицы измерения, привязанные к шрифту

em	размер шрифта элемента
ex	высота x в нижнем регистре
ch	ширина 0 (ZERO, U+0030)
rem	размер шрифта корневого элемента

Для font-size это унаследованный размер шрифта, для остальных свойств — текущий размер шрифта, уже вычисленный для font-size .

Чтобы увидеть это вживую, возьмем такой код:

Получилось вот что:

Розовая полоса — градиент высотой 1em , чтобы было с чем сравнивать.

Оба блока имеют одинаковый размер шрифта, уменьшенный относительно родительского элемента в два раза ( font-size: .5em; ). И как теперь указать толщину рамки равной размеру шрифта?

border-width: .5em делает рамку в два раза тоньше, чем нужно. Это происходит потому, что родительский размер шрифта использует только font-size , а border получает вычисленное значение из font-size .

Таким образом, если где-то не в font-size нужно использовать текущий размер шрифта, не нужно копировать значение размера, достаточно указать 1em . У правого блока рамка правильной толщины.

Ещё одно демо, для понимания как соотносятся em и символы шрифта. Цветные полосы имеют высоту 1em , поэтому видно, что 1em примерно соответствует высоте символов с учётом заглавных букв и выносных элементов:

Размер em нигде не зафиксирован, и вычисляется в момент использования на основе размера шрифта родителя. Например, если задать размер шрифта вот таким образом:

а потом вложить несколько дивов один в другой, размер шрифта каждого следующего дива будет меньше предыдущего:

Потому что 1em — это текущий унаследованный размер шрифта, а .75em — унаследованный шрифт, уменьшенный на четверть. Для каждого нового вложенного дива сначала наследуется уменьшенный шрифт родителя, а потом тоже уменьшается заданным образом.

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

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

В демо цветные полосы имеют высоту 1ex , и для выбранных шрифтов 1ex будет равен высоте маленькой x :

Посмотрим, как на ex влияет шрифт, и как ex соотносится с em .

В этом демо квадратикам в левой группе заданы размеры в 1em , в правой — в 2ex , так можно проверить равен ли ex половине em . Также каждому квадратику задан свой шрифт:

В отличие от em , размер ex будет меняться вместе со шрифтом, и во всех случаях 2ex не равно 1em , то есть на соотношение в .5 полагаться нельзя.

ex точно также как и em наследует размер шрифта родителя:

ch — ширина символа 0 . Для моноширинных шрифтов это точная ширина любого символа, для остальных — примерная ширина одного узкого символа. Если по каким-то причинам ширину невозможно вычислить, запасным значением будет .5em .

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

Ширина блока будет верной только для моноширинных шрифтов (см. Courier ), в некоторых шрифтах будет работать и для цифр ( Arial , Comic Sans ), в остальных случаях нельзя рассчитывать, что 1ch будет равен ширине символа:

Сопоставим 1em , 2ex и 2ch :

1ch больше 1ex (ширина 0 больше высоты x );
1ch не равен половине em ;
значение ch может меняться вместе со шрифтом.

rem — это root em , размер шрифта корневого элемента, для веб-страницы это элемент html . Размер шрифта по умолчанию — 16px . Это значение не зафиксировано в спецификации, но используется всеми браузерами. Про историю вопроса можно почитать в рассылке W3C.

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

Важно понимать, что размер rem можно переопределить только для элемента html . Например, возьмем такие стили:

Если rem можно было бы переопределять в любом месте, текст бы увеличился, но этого не произошло:

Высота цветной полосы 24px , чтобы было с чем сравнивать.

Если переопределить размер шрифта для элемента html , всё сработает:

В отличие от em , rem всегда содержит размер шрифта только корневого элемента, поэтому вложенность ни на что не влияет:

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

Единицы измерения, привязанные к размерам экрана

vw	1% ширины вьюпорта
vh	1% высоты вьюпорта
vmin	1% от меньшего из vw и vh
vmax	1% от большего из vw и vh

Эти единицы предназначены для создания элементов, размер которых должен зависеть от размера окна (вьюпорта).

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

Размеры картинок задаются вот таким образом:

Ширина вьюпорта — 100vw . Это значение позволяет растянуть на ширину экрана любой элемент при любой вложенность.

Если задать элементу ширину 100% , получится ширина родителя, который, скорее всего, занимает только часть экрана, а 100vw позволяет растянуть именно на ширину окна браузера не обращая внимания на размеры родительских элементов.

Правда, тут есть проблема: 100vw — это ширина всего окна вместе с полосой прокрутки, а доступная для контента ширина окна полосу прокрутки не включает, из-за чего при попытке задать элементам ширину вьюпорта появится горизонтальный скролл:

Если нет возможности изменить вёрстку, чтобы избежать использования 100vw , можно задать overflow-x: hidden ближайшему родителю, растянутому на ширину страницы:

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

Если вы верстаете на MacOS, и полосы прокрутки исчезают сами по себе, выберите в System Perefences/General опцию «Показывать всегда», это позволит верстать страницы сразу с учетом сколлбаров:

Используя vw и vh можно делать полностью резиновые элементы, которые будут сами подстраиваться под размер окна, например, так:

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

С помощью vmin можно сделать элемент, который всегда будет целиком помещаться в экран, сохраняя пропорции:

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

В отличие от единиц, привязанных к шрифту, единицы вьюпорта не реагируют на масштабирование страницы. Откройте это демо и поизменяйте масштаб используя Ctrl+ / Ctrl- . Текст, размер которого задан в rem , будет увеличиваться и уменьшаться, текст с размером, заданным в vw , останется неизменным.

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

В качестве решения предлагается примешивать единицы вьюпорта к относительным единицам измерения, привязанным к размеру шрифта, например, так:

Вживую можно потестить здесь, пример взят из этой статьи. Больше про управление размером шрифта с помощью единиц вьюпорта можно почитать тут.

За дополнение про особенности масштабирования спасибо @bekharsky.

У единиц, привязанных к размерам вьюпорта, могут быть проблемы с поддержкой в IE включая 11-й, поэтому обязательно проверяйте код в действующем браузере.

В спецификации описано немного больше единиц измерения, например:

cap — высота заглавной буквы
lh — высота строки
rlh — высота строки корневого элемента

Но в данный момент они нигде не поддерживаются, поэтому в статье не рассматриваются.

Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Одним из наиболее эффективных методов типографики в вебе является использование относительных единиц измерения rem и em.

Вопрос в том, что использовать? Уже долго длится спор между приверженцами rem'ов и em'ов, которые пытаются доказать, что нужно использовать именно «их» единицы.

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

Что такое EM?

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

Это утверждение не имеет смысла в вебе, так как мы не используем размер точки (point-size). Но имеет смысл, если мы заменим размер точки на размер шрифта (font-size).

Это значит, что: 1em = 20px в том случае, когда у css-селектора прописано правило font-size: 20px;

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

Какой на самом деле font-size у h1?

Нам придется взглянуть на родительский элемент, чтобы высчитать размер шрифта у этого h1. Допустим, что родительский элементом является html, и его font-size установлен в 16px.

Следуя этому, мы можем увидеть, что высчитанное значение h1 составляет 32px, или 2 * 16px.

На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.

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

Заметка: font-size будет установлен в 100%, если вы сами его не задали.

Для большинства пользователей (и браузеров), размер шрифта в 100% будет по умолчанию выдавать 16px до тех пор, пока они его не поменяют в настройках своего браузера. Хотя редко кто подобным занимается.

Ладно, что дальше? Вернемся к em.

Em также используется, чтобы задать значения для других свойств, в дополнение к font-size. margin и padding являются двумя из тех свойств, которые измеряются в em'ах.

Вот где большинство людей путается со значениями em.

Рассмотрим следующий код. Каким будет значение margin-bottom для обоих элементов: h1 и p? (Предположим, что font-size у элемента html установлен в 100%)

Удивлены, что значение margin-bottom, установленное в 1em, разное в обоих случаях?

Это явление объясняется тем, что 1em равен размеру шрифта (font-size) своего элемента. Так как font-size у элемента h1 был установлен в 2em, то другие свойства у этого h1 (тот же margin-bottom) уже будут отталкиваться от нового значения font-size. То есть для них 1em будет равен уже 32px.

Людей сбивает с толку тот факт, что 1em может принимать различные значения в разных участках кода. Подобное может вас конкретно запутать, если вы только-только начали разбираться с em.

Что такое REM?

Rem — это корневой em (Root Em). Он создан, чтобы облегчить вычислительные проблемы, с которыми многие иногда сталкиваются.
Это единица типографики, равная корневому (базовому) значению font-size. Это значит, что 1rem всегда будет равен значению font-size, которое было определено в html.

Рассмотрим тот же самый код, что и выше, только будем использовать уже rem'ы. Как теперь изменится значение margin-bottom?

Как видите, 1rem всегда будет принимать значение, равное 16px, и не имеет значения где вы примените его (до тех пор, пока не поменяете font-size у элемента html)
Существует зависимость. Это несложно понять.

Такие вот rem'ы. Не так сложно понять как они работают, зная как работают em'ы, согласны?

Теперь, приступим к самой вкусной части статьи. Итак, rem или em?

REM'ы или EM'ы?

Это очень спорный вопрос.

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

Как ни странно, но я все-таки попался в ловушку, используя em'ы и rem'ы в своей работе на разных этапах разработки. Я был в восторге от того, как em'ы помогали мне в создании модульных компонентов, но я терпеть не мог всех тех сложностей, что они привносили в мой код. Мне также нравилось, как при помощи rem'ов все вычисления проходили гораздо проще, но меня бесили те хаки, которые приходилось писать, чтобы сделать мои компоненты модульными.

Оказывается, у em и rem существуют как сильные, так и слабые стороны. И их нужно использовать по-разному, в зависимоти от обстоятельств.

Как? У меня есть два простых правила:

Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.

Стало немного проще? Что ж, давайте рассмотрим написание простого компонента (пусть это будет заголовок), используя и em'ы и rem'ы, и вы сами увидите в действии эти два правила.

Используем только REM'ы для создания элемента заголовка

Скажем, у вас есть элемент заголовка h2, который выглядит вот так:

Привет! Я — заголовок!

Стили заголовка должны быть подобны нижеуказанным, если вы указываете все в rem:

Все идет по плану.

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

Разметка нашего второго заголовка будет выглядеть как-то так:

CSS будет таким:

К сожалению, наш код не стал выглядеть лучше. Слишком мало свободного пространства между краями нашего элемента .header--large и самим текстом заголовка.

Не достаточно свободного пространства между краями и текстом нашего большого заголовка

Если вы настаиваете на использовании только лишь rem'ов, то единственный способ решить данную проблему — это переопределить padding у .header--large:

Ну вот, теперь дышать стало посвободнее!

Заметили что-нибудь? font-size у элемента .header--large вдвое больше, чем у элемента .header. Вследствие этого, padding у элемента .header--large также вдвое больше, чем у элемента .header.

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

Мы можем упростить наш код таким образом, что не придется переопределять padding у элемента .header--large, если не побоимся использовать в совокупности и em'ы и rem'ы.

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

Далее, давайте посмотрим, что будет происходить, если вы будете использовать только em'ы в вашем заголовке.

Используем только EM'ы для создания элемента заголовка

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

Оба, .header и .header--large будут выглядеть точно также, как их двойники на rem'ах.

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

Как правило, эти элементы идут до или после заголовка, как тут:

Заголовки имеют разные связи с другими элементами

Разметка для этого блока будет такой:

Мы также добавим margin-right и margin-left для параграфов:

Ой-ёй, padding у первого заголовка не выровнен вместе с текстом параграфа

padding слева и справа у элемента .header--large слишком большой!

Если вы настаиваете на использовании только em'ов, то единственный способ решить данную проблему — это переопределение свойств padding-left и padding-right у .header--large:

Вот теперь все выглядеит как надо!

Заметили что-нибудь? font-size у элемента .header--large вдвое больше, чем у элемента .header. Тем не менее, padding-left и padding-right у элемента .header--large вдвое меньше, чем padding-left и padding-right у элемента .header!

Как и в предыдущем случае, мы можем упростить наш код, если согласимся использовать вкупе em'ы и rem'ы. В частности, для padding-left и padding-right мы будем использовать rem'ы, а для padding-top и padding-bottom — em'ы.

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

Стало более понятно, как работают вместе rem и em в одном компоненте, согласны?

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

Компоненты на сетке

Прежде, чем мы продолжим, давайте объединим наш заголовок и параграфы в единый компонент:

Вот базовые стили для нашего компонента:

Пока все хорошо. Здесь мы видим все, с чем уже познакомились ранее.

Идем дальше. Этот компонент может быть где угодно на нашем сайте. Например:

В контентной части;
В сайдбаре;
В любой части нашей сетки;
.

Вероятные места, где может располагаться наш компонент

Заголовок нашего компонента должен становиться меньше по размеру (т.е., уменьшаться его font-size), если компонент будет находиться в узкой части сайта, например, в сайдбаре.

Элемент заголовка на сетке

Есть вариант как сделать это. Мы можем модифицировать класс нашего компонента. Разметка теперь примет вот такой вид:

Теперь касательно стилей компонента. Здесь действуют те же самые правила:

Задавай значения в em, если свойства масштабируются относительно font-size;
Во всех остальных случаях задавай значения в rem.

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

Свойства всех внутренних элементов масштабируются вместе со значением font-size компонента;
Свойства лишь некоторых внутренних элементов масштабируются вместе со значением font-size компонента.

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

Путь первый. Свойства всех внутренних элементов масштабируются вместе со значением font-size компонента

Давайте начнем с примера, чтобы увидеть, как выглядит такой компонент:

Заметили, как font-size, margin и padding всех элементов внутри компонента изменяются в одно и то же время?

Если ваш компонент ведет себя таким же образом при изменении размеров, то вам нужно все размеры указывать в em'ах. То есть код становится таким:

Затем, чтобы изменения в размерах заработали, необходимо изменить свойство font-size у компонента.

Пока все хорошо.

Давайте теперь немного усложним наш пример.

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

Одинаковые отступы на сетке вида 1 + 2

Разметка для этой сетки такая:

Я установил промежутки между элементами сетки в 2em, с учетом, что базовый font-size равен 16px. Иными словами, высчитанная ширина каждого промежутка равна 32px.

Задача состоит в следующем: разделить маленькие компоненты A и B отступом в 32px. Для начала, мы можем попробовать установить margin-top компоненту B, равное 2em.

К сожалению, результат не радует. margin между маленькими компонентами A и B больше, чем ширина вертикального промежутка при видимой области (viewport) более 800px.

Пространство между маленькими блоками A и B не такое же, как пространство вертикального промежутка при viewport > 800px

Это происходит потому, что font-size компонента равен 1.5em (или 24px), когда видимая область становится более 800px. В тот момент, когда font-size становится 24px, высчитанное значение 2em становится 48px, которое отличается от 32px, которые мы и добивались получить.

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

Вертикальный отступ теперь равен горизонтальным!

Та-да! Проблема решена :) Вот вам пример на Codepen, можете поиграться с кодом.

Заметка: Вам придется использовать Flexbox, чтобы построить такую сетку. Я не буду объяснять, как я ее выстроил, так как это выходит за рамки статьи. Советую почитать эту статью, если хотите узнать больше про Flexbox.

Да, кстати, не я придумал эту технику. Chris Coyier написал об этом год назад (он гений!).

В любом случае, готовы двигаться дальше? Если да, переходим ко второму случаю. Если нет, не стесняйтесь оставлять комментарии, и я постараюсь объяснить это вам каким-то иным способом.

Путь второй. Свойства лишь некоторых внутренних элементов масштабируются вместе со значением font-size компонента.

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

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

Например, вам нужно изменить font-size заголовков при большей видимой области (viewport).

Только заголовки меняются в размере, когда меняется видимая область

Давайте опишем стили данного примера, взяв за основу стили, которые мы описали выше:

Как только меняется font-size у заголовка, на границе видимой области в 1200px, мы можем безопасно использовать rem'ы в качестве единиц измерения каждого свойства (за исключением padding-top и padding-bottom у заголовка)

После этого вы можете изменить размер шрифта в заголовке на разных вюьпортах, просто добавив media в них:

Та-да! Заметили, что когда мы ресайзим окно браузера, меняется только font-size у заголовка? Вот так вот и нужно поступать во втором случае :)

Еще один момент

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

На этом все со вторым случаем. Вот вам пример на Codepen, можете поиграться с кодом.

Я уже предвижу ваш вопрос, поэтому сначала отвечу на него: Какой метод вы должны использовать?

Я скажу, что все зависит от дизайна.

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

Подведем итоги

Что же использовать, rem или em? Я думаю, что данный вопрос не совсем корректен. И rem и em имеют свои сильные и слабые стороны, и их можно использовать вместе, — это поможет вам в написании простых, модульных компонентов!

Теперь касательно вас! Чью сторону вы примите в этом споре? Я бы с радостью почитал в комментариях ниже, что вы думаете по этому поводу:)

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

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

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

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

Что такое Px

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

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

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

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

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

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

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

Путаница между em и rem

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

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

Вложенные элементы

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

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

Комбинированный пример

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

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

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

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

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

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

Заключение

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

Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!

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

Для измерения размера изображений применяются по меньшей мере три параметра:

разрешение цифрового изображения (в пикселях),
размер отпечатка (в сантиметрах),
разрешение при печати (dpi - точки на дюйм).

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

Для начала, определимся, что такое пиксель и какое отношение он имеет к сантиметрам.

Что такое «пиксель»

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

Фотография, которую вы скачали с фотоаппарата имеет разрешение несколько десятков мегапикселей. Например, если картинка имеет 6000 пикселей в ширину и 4000 пикселей в высоту, у нее разрешение 6.000 * 4.000 = 24.000.000 пикселей или 24 мегапикселя.

При просмотре на мониторе картинка автоматически масштабируется до разрешения монитора 1920*1080 (около 2 мегапикселей). Если мы пытаемся увеличить масштаб (растягиваем фотографию), то до какой-то степени картинка растягивается без видимой потери качества, но потом на ней появляются характерные квадратики (как на примере выше). Это происходит, когда реальное разрешение фотографии меньше того, что мы хотим видеть - размер пикселя на фотографии стал больше размера пикселя на мониторе.

Сантиметры

Что такое "сантиметр", я думаю, объяснять не нужно. В нашем случае в сантиметрах измеряется размер отпечатков фотографии.

Если же попробовать распечатать форматом поменьше, например, 10*15 сантиметров, даже невооруженным глазом будет заметно, что качество печати получилось лучше. А если напечатать картинку размером на 4*6 см, то получим настоящее «фотокачество». Сгодится на магнитик или карманный клендарик :)

Таким образом можно сделать вывод – чем больше по размеру планируемый отпечаток, тем больше (мега)пикселей разрешения должно иметь изображение. И вот мы практически подошли к решению главного вопроса.

Что такое «DPI»

DPI сокращение английской фразы Dots per Inch, что на русский переводится как точки на дюйм. Эта величина как раз показывает, сколько пикселей изображения приходится на один «погонный» дюйм при печати (дюйм равен 2.54 см). Еще есть величина DPC (точек на сантиметр), но она используется реже - как ни крути, все эти технологии печати пришли к нам оттуда, где в ходу дюймы, футы, фунты и т.д. Итак, вернемся к нашему примеру - картинке 900*600 пикселей, которую мы решили напечатать форматом 30*20 см.

Переведем для удобства сантиметры в дюймы - получаем примерно 12" на 9". Если поделить 900 пикселей на 12", то получаем разрешение печати около 76 DPI. На практике оказывается, что это слишком низкое разрешение, при котором сложно рассчитывать на хорошую детализацию.

Чтобы получить отпечаток приемлемого качества, нужно разрешение печати как минимум 150 DPI, а если хотим совсем хорошую детализацию, то не менее 300 DPI. Таким образом, чтобы обеспечить хорошую детализацию при печати 30*20 сантиметров, оригинальное цифровое изображение должно иметь разрешение 3540 * 2670 пикселей - это около 9 мегапикселей. Вот и нашли причину, почему фотографии, скачанные из Интернет при распечатке выглядят не резко.

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

150, 200, 300, 600 DPI – сколько это в пикселях, сантиметрах?

Формула пересчета DPI в пиксели очень проста:

DPI = Пиксели : Дюймы

Если нужно пересчитать в сантиметры, делим это еще на 2.54 (именно столько сантиметров в дюйме).

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

Таблица перевода DPI, сантиметров и пикселей

Как пользоваться? Предположим, нам нужно печатать картинку шириной 20 сантиметров с разрешением 300dpi. В строке "сантиметры" находим 20, в колонке DPI - 300. На пересечении строки и столбца стоит значение 2362 пикселя. Именно до такой ширины и нужно отмасштабировать картинку.

Еще проще живется тем, у кого есть Adobe Photoshop, либо другой более-менее приличный фоторедактор. При изменении размеров изображения (Alt + Ctrl + I) он автоматически пересчитывает сантиметры в пиксели и DPI:

Стоит ввести ширину в сантиметрах и указать требуемое разрешение, он автоматически пересчитает размер картинки в пикселях.

Если на компьютере нет ни одной программы, которая умеет пересчитывать DPI в пиксели и сантиметры, вы можете воспользоваться Онлайн калькулятором DPI моего собственного производства :)

Поддержать проект

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

Читайте также: