em vs. px vs. pt vs. percent / Хабр

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

Знакомьтесь — единицы

1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.

3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.


Изменение Font-size от 100% до 120%.

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

«em» vs «%»

Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body {font-size: 1em;}), вы,

должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).


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

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%».

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

Вердикт

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

Победитель: процент (%).

— CSS | MDN

CSS тип данных <length> представляет единицу длины. Длина может быть использована в таких свойствах CSS как width, height, margin, padding, border-width, font-size, и text-shadow.

Примечание: Обратите внимание: Хоть значения <percentage> также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <length>, они не являются <length> значениями.

Тип данных <length> состоит из <number>, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа 0 единица измерения необязательна.

Примечание: Обратите внимание: Некоторые свойства допускают использование отрицательных значений <length>, а некоторые нет.

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

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

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

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

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

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

cap
Экспериментальная возможность

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

ch

Представляет ширину символа «0» (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.

em

Представляет подсчитанный размер шрифта элемента. Если используется в свойстве font-size, представляет унаследованный размер шрифта.

ex

Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах

1ex ≈ 0.5em.

ic Экспериментальная возможность

Равна используемой в шрифте ширине символа «水» (ККЯ, символ «вода», U+6C34).

lh Экспериментальная возможность

Равна рассчитанному значению свойства line-height, переведённому в абсолютные единицы измерения.

rem

Представляет размер шрифта корневого элемента (обычно <html>). Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).

rlh Экспериментальная возможность

Равна рассчитанному значению свойства line-height корневого элемента (обычно <html>), переведённому в абсолютные единицы измерения. Когда используется в свойстве

font-size корневого элемента, представляет значение по умолчанию.

Единицы, зависящие от размеров экрана

Эти единицы определяют значение <length> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках @page.

vh

Равна 1% высоты блока содержимого.

vw

Равна 1% ширины блока содержимого.

vi Экспериментальная возможность

Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.

vb Экспериментальная возможность

Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.

vmin

Равна vh или vw в зависимости от того, что из них меньше.

vmax

Равна vh или vw в зависимости от того, что из них больше.

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

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

Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения px представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, 1in определяется как 96px, что равно 72pt. Последствием такого способа определения является то, что длины, описанные в дюймах (in

), сантиметрах (cm) или миллиметрах (mm) необязательно равны одноимённым физическим единицам.

Для устройств с высоким dpi дюймы (in),сантиметры (cm) и миллиметры (mm) такие же, как и соответствующие физические единицы. Таким образов, единица px определяется относительно их (1/96 одного дюйма).

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

px

Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея. 1px = 1/96 от 1in.

cm

Один сантиметр. 1cm = 96px/2.54.

mm

Один миллиметр. 1mm = 1/10 от 1cm.

Q Экспериментальная возможность

Четверть миллиметра. 1Q = 1/40 от 1cm.

in

Один дюйм. 1in = 2.54cm = 96px.

pc

Одна пайка. 1pc = 12pt = 1/6 от 1in.

pt

Одна точка. 1pt = 1/72 от 1in.

mozmm Non-standard , удалена в Firefox 59

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

При анимации значения <length> интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией (en-US) анимации.

Specification
CSS Values and Units Module Level 4
# lengths

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Last modified: , by MDN contributors

css — Должен ли я использовать pt или px?

спросил

Изменено 2 месяца назад

Просмотрено 183 тыс. раз

В чем разница между pt и px в CSS? Какой из них я должен использовать и почему?

1

Все эти ответы кажутся неверными. Вопреки интуиции, в CSS пикселей не равно пикселям. По крайней мере, не в простом физическом смысле.

Прочтите эту статью от W3C, EM, PX, PT, CM, IN… о том, что px — это «волшебная» единица измерения, изобретенная для CSS. Значение px зависит от оборудования и разрешения. (Эта статья свежая, последнее обновление 2014-10.)

Мой собственный взгляд на это: 1 пиксель — это размер тонкой линии, которую дизайнер задумал сделать едва заметной.

Чтобы процитировать эту статью:

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

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

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

В этой статье приведены некоторые рекомендации по использованию pt vs px vs em , чтобы ответить на этот вопрос.

4

Вот очень подробное объяснение их различий

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Суть (из источника)

Пиксели — это единицы фиксированного размера, которые используются в экранных носителях (т. е. для чтения на экране компьютера). Пиксель означает «элемент изображения», и, как вы знаете, один пиксель — это один маленький «квадратик» на вашем экране. Пункты традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге и т. д.). Один пункт равен 1/72 дюйма. Точки очень похожи на пиксели в том смысле, что они являются единицами фиксированного размера и не могут масштабироваться.

9

Взгляните на эту прекрасную статью на CSS-Tricks:

  • px – em – % – pt – ключевое слово

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

pt

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

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

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

пикселей

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

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

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

«Больше» увеличило 16px родителя до 20px, увеличение на 25%.

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

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

7

Пункт равен 1/72 дюйма и является бесполезной мерой для всего, что отображается на устройстве, которое неправильно вычисляет DPI. Это делает его разумным выбором для печати и ужасным выбором для использования на экране.

Пиксель — это пиксель, который в большинстве случаев отображается на экранный пиксель.

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

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

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

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

… и так далее.

0

pt — это производное (аббревиатура) от «точки», которая исторически использовалась в печатных шрифтах, где размер обычно «измерялся» в «точках», где 1 точка имеет приблизительное измерение 1/72 дюйма, и, таким образом, шрифт размером 72 пункта будет иметь размер 1 дюйм.

РЕДАКТИРОВАТЬ: Примечание для уточнения В одном дюйме или 2,54 см примерно 72 (72,272) точки. Точка была впервые установлена ​​миланским типографом Франческо Торниэллой да Новара ( ок. 149 г.).0 – 1589) в его алфавите 1517 года, L’Alfabeto. (вы можете искать различные ссылки на них)

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

Тесно связаны с точкой термины «верхний регистр» и «нижний регистр», которые исторически были связаны с выбором фиксированных типографских символов, где «заглавные» символы помещались в рамку (регистр) над непрописными символами, которые были помещены в поле ниже и, следовательно, в «нижнем» регистре.

Были разные боксы (кейсы) для разных типографских шрифтов и размеров, но все же и «верхний» и «нижний» регистр для каждого из тех.

Другим термином является «пика», который представляет собой меру одного символа в шрифте, таким образом, пика составляет 1/6 дюйма или 12-точечные единицы измерения (12/72).

Строго говоря, компьютерное измерение составляет 4,233 мм или 0,166 дюйма, тогда как старая точка (американская) равна 1/72,27 дюйма, а французская — 4,512 мм (0,177 дюйма). Таким образом, мое утверждение «приблизительно» относительно измерений.

Кроме того, пишущие машинки, используемые в офисах, имели размер «Elite» или «Pica», где размер составлял 10 и 12 символов на дюйм соответственно.

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

Обратите внимание, что типографская «нога» изначально была взята из реальной стопы умершего печатника. Типографский фут содержит 72 пики или 864 пункта.

Что касается использования CSS, я предпочитаю использовать EM, а не px или pt , таким образом получая преимущество масштабирования без потери относительного местоположения и размера.

РЕДАКТИРОВАТЬ: просто для полноты вы можете думать о EM ( em ) как об элементе измерения высоты одного шрифта, таким образом, 1em для шрифта размером 12pt будет высотой этого шрифта, а 2em будет вдвое больше высоты. Обратите внимание, что для шрифта размером 12 пикселей 2em составляет 24 пикселя. SO 10px обычно составляет 0,63 em стандартного шрифта, поскольку «большинство» браузеров используют 16px = 1 em в качестве стандартного размера шрифта.

4

Да, «px» означает «пиксель»

Теперь, когда я это сказал, я уже слышу приближение армии ясновидящих с надписью «px не имеет ничего общего с пикселями» на их баннерах. Они так гордятся своим знанием, что просматривают каждый комментарий, содержащий первоначальную правду, и подробно объясняют, что это ложь, неправда, вводит в заблуждение и т. д. называется iPhone 4.
Вот что случилось.

Мирные дни

До дисплеев Retina один пиксель был одним пикселем. Потому что так и должно быть, по человеческой логике. Вы помещаете линию в один пиксель на экране, увеличиваете ее до чертиков, и вот вы видите: она имеет ширину ровно ОДИН ПИКСЕЛЬ. На многих аппаратных средствах, в том числе современных, это все еще так, поэтому говорить «1 пиксель = 1 пиксель» совсем не так, как «неверно».

Но.

В то время, в один прекрасный день, за iPhone 3 последовал iPhone 4, удвоив разрешение как по X, так и по Y, и разработчики Safari беспокоились, что все веб-страницы будут выглядеть нелепо, особенно потому, что многие веб-разработчики полагались на стабильное разрешение 320×480. . Так что просто создайте 640×960-пиксельная область убила бы большинство сайтов. И в этот момент у кого-то возникла идея на миллиард долларов представить волшебного зверя: функцию CSS под названием -webkit-min-device-pixel-ratio — на iPhone 3 это было 1, а на iPhone 4 было установлено значение 2 по умолчанию. Значение «1 пиксель CSS теперь означает 2 пикселя экрана». Очень уродливый хак, чтобы веб-сайты выглядели несколько неповрежденными — в то время он работал, с очень небольшой стоимостью некоторых изображений, которые выглядели немного размытыми, но в конечном итоге это вызвало это всемирное непонимание бедного старого px , который на самом деле не сделал ничего плохого.

Итак: pt или px?

На экранах используйте px, потому что на многих-многих дисплеях это будет означать ОДИН ПИКСЕЛЬ. Самым большим преимуществом использования пикселей является то, что они выглядят четкими; даже если 1 пиксель означает 2 или 3 физических элемента изображения, все, что вы рисуете, будет начинаться с границы, а не где-то посередине. Это очень важно. Посмотрите любую браузерную анимацию, включающую текст, особенно переходы размеров: когда вы увеличиваете div до двойного размера, но медленно. Вы увидите, как ваш браузер пересчитывает свои пиксели и перерисовывает шрифт, когда анимация завершена. Есть временное изображение области, которая немного размыта — чтобы сделать саму анимацию более плавной — и затем, после достижения конечного состояния, рассчитывается более точное изображение. См. этот CodePen.

1px — это всегда целочисленное произведение аппаратных пикселей; то есть, если ваша операционная система не умничает, например, изменяя размер всего рабочего стола до sqrt (2) x PI. Или просто 125%, да, привет Windows на крошечных ноутбуках. Но в любом случае — с px у вас больше всего шансов выровнять свои вещи с физической сеткой.

Что насчет пт? Забавно, что pt на самом деле переводится в px, так что это просто худший способ указать размеры в пикселях. Вот калькулятор. Баллы (поскольку они пришли из мира печати) начинают иметь смысл, когда вы что-то печатаете, но сегодня есть лучшие альтернативы, в зависимости от того, что вам нужно — так что баллы почти никогда не нужны.

TL;DR

Для экранов по возможности используйте px.

2

Единицы CSS

❮ Предыдущий Далее ❯

Единицы CSS

CSS имеет несколько различных единиц измерения длины.

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

Длина — это число, за которым следует единица длины, например 10px , 2em и т. д.

Пример

Установка различных значений длины в px (пикселях):

h2 {
  размер шрифта: 60 ​​пикселей;
}

p {
  размер шрифта: 25 пикселей;
высота строки: 50px;
}

Попробуйте сами »

Примечание: Между числом и единицей измерения не должно быть пробела. Однако, если значение 0 единицу измерения можно не указывать.

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц длины: абсолютная и относительная .

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

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

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

Блок Описание
см сантиметров Попытайся
мм миллиметров Попытайся
в дюймов (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей * пикселей (1 пиксель = 1/96 дюйма) Попытайся
пт баллов (1 пт = 1/72 от 1 дюйма) Попытайся
шт. пик (1 шт = 12 пт) Попытайся

* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

Относительная длина

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

№
Блок Описание
эм Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) Попробуйте
бывший Относительно x-высоты текущего шрифта (используется редко) Попробуйте
ч Относительно ширины «0» (ноль) Попробуйте
рем Относительно размера шрифта корневого элемента Попробуйте
ВВ Относительно 1% ширины окна просмотра* Попробуйте
вх Относительно 1% высоты окна просмотра* Попробуйте
мин Относительно 1% меньшего размера области просмотра* Попробуйте
вмакс Относительно 1% большего размера окна просмотра* Попробуйте
% Относительно родительского элемента Попробуйте

Совет: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
* Viewport = размер окна браузера.

No related posts.