Css pt px em: px, em, rem и другие

Содержание

Подробное объяснение 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

IE не может настроить размер шрифта, который использует пиксель как единицу измерения;
Причина, по которой большинство зарубежных веб-сайтов можно настраивать, заключается в том, что они используют em или rem в качестве единицы шрифта;
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 имеет следующие характеристики:

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

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

Селектор тела объявляет размер шрифта = 62,5%;
Разделите исходное значение в пикселях на 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.

Пересчитайте значения 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. Таблица преобразования шрифтов

Размер шрифта	pt	px	em
№ 1	42pt	56px	3.5em
Сяочу	36pt	48px	3em
	34pt	45px	2.75em
	32pt	42px	2.55em
	30pt	40px	2.45em
	29pt	38px	2.35em
	28pt	37px	2.3em
	27pt	36px	2.25em
Номер один	26pt	35px	2.2em
	25pt	34px	2.125em
Маленький	24pt	32px	2em
Номер два	22pt	29px	1.8em
	20pt	26px	1. 6em
Кодзи	18pt	24px	1.5em
	17pt	23px	1.45em
Номер три	16pt	22px	1.4em
ми	15pt	21px	1.3em
	14.5pt	20px	1.25em
Номер четыре	14pt	19px	1.2em
	13.5pt	18px	1.125em
	13pt	17px	1.05em
Маленькая четверка	12pt	16px	1em
	11pt	15px	0.95em
Номер пять	10.5pt	14px	0.875em
	10pt	13px	0.8em
Маленькая пятерка	9pt	12px	0.75em
	8pt	11px	0.7em
Номер шесть	7.5pt	10px	0.625em
	7pt	9px	0. 55em
маленькая шестерка	6.5pt	8px	0.5em
Номер семь	5.5pt	7px	0.4375em
Номер восемь	5pt	6px	0.375em

Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»

Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

Селектор {
font-size: значение с единицей измерения величины;
{

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

p {
font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */
{

В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

Абсолютные величины

Физические единицы:

Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
Сантиметры (cm), 1cm = 96px/2.54.
Миллиметры (mm), 1mm = 1/10 от 1cm.
Четверть миллиметра, (q) 1q = 1/40 от 1cm.
Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
Пункты (pt), 1pt = 1/72 дюйма.

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

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

Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}

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

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

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

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

Процентные значения.

Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).

html {
font-size: 16px;
}

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

Давайте рассмотрим пример. Допустим, у всех параграфов (элемент <p>) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования процентных значений</title>
<style>
.halfFontSize {
font-size: 50%; 
}
.doubleFontSize {
font-size: 200%; 
}
</style>
</head>
	<body>
		<p>Обычный параграф на странице</p>
		<p>Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.</p>
		<p>Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента. </p>
	</body>
</html>

Результат нашего примера:

Рис.51 Пример использования процентных значений.

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

Первый параграф: 16px * 100% = 16px
Второй параграф: 16px * 50% = 8px
Третий параграф: 16px * 200% = 32px

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример наследования процентных значений</title>
<style>
div {
font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков <div> */
}
.doubleFontSize { /* устанавливаем размер шрифта в два раза больше чем родительский */
font-size: 200%; 
}
.doubleFontSize > div { /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */
font-size: 200%; 
}
</style>
</head>
	<body>
		<div>Родительский div 12px
			<div>Блок, к которому применен стиль с размером шрифта 200% от родительского элемента. 
				<div>Блок, который наследует значение</div>
			</div>
		</div>
	</body>
</html>

Результат нашего примера:

Рис.52 Пример наследования процентных значений.

В данном примере для вложенного блока <div> с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок <div>, для которого мы установили размер шрифта 12px.

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

12px * 200% = 24px

Если бы мы не изменили значение размера шрифта для блока <div>, то расчёт бы происходил исходя из базового шрифта:

16px(базовый размер шрифта) * 200% = 32px

Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

размер шрифта родительского элемента * 200% = 48px

Единица измерения еm.

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

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

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

Например:

базовый размер текста = 1em = 100%
базовый размер текста * 2 = 2em = 200%
базовый размер текста * 0.5 = 0.5em = 50%

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования значений em</title>
</head>
<body>
	<p style = "font-size:.8em;">font-size:0.8em</p>
	<p style = "font-size:80%;">font-size:80%</p>
	<p style = "font-size:1.5em;">font-size:1.5em</p>
	<p style = "font-size:150%;">font-size:150%</p>
	<p style = "font-size:1.8em;">font-size:1.8em</p>
	<p style = "font-size:180%;">font-size:180%</p>
</body>
</html>

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

Единица измерения rеm.

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример наследования значений em</title>
<style>
div {
font-size: 1.25em; 
}
</style>
</head>
	<body>
		<div>Блок 1
			<div>Блок 2
				<div>Блок 3
					<div>Блок 4
						<div>Блок 5
							<div>Блок 6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

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

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования значений rem</title>
<style>
div {
font-size: 1.25rem; 
}
</style>
</head>
	<body>
		<div>Блок 1
			<div>Блок 2
				<div>Блок 3
					<div>Блок 4
						<div>Блок 5
							<div>Блок 6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

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

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

Рис.55 Пример использования значений rem.

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

Единица измерения еx.

Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

Единица измерения ch.

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

.width50 {
width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */
}

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

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

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Масштабируемые единицы измерения</title>
<style>
* {
margin: 0 ; /* внешние отступы для всех сторон*/
}
.viewportHeight30 {
font-size: 5vw; /* размер шрифта*/
width: 100vw; /* ширина блока */
height: 30vh; /* высота блока */
background-color: orange; /* цвет заднего фона */
}
.viewportHeight50 {
font-size: 4vw;
width: 75vw;
height: 50vh;
background-color: yellow;
}
.viewportHeight20 {
font-size: 3vw;
width: 50vw;
height: 20vh;
background-color: red;
}
</style>
</head>
	<body>
		<div class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh;</div>
		<div class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh;</div>
		<div class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;</div>
	</body>
</html>

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).

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

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.
1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

.viewportMin { . viewportMax { width: 40vmin; width: 40vmax; height: 40vmin; height: 40vmax; } }

<!DOCTYPE html>
<html>
<head>
	<title>Vmin и vmax c масштабируемыми единицами измерения</title>
<style>
* {
margin: 0;
}
div {
display: inline-block; /* элементы <div> блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта*/
}
.viewportMin {
width: 40vmin; /* ширина блока */
height: 40vmin; /* высота блока */
background-color: black; /* цвет заднего фона */
}
. viewportMax {
width: 40vmax; /* ширина блока */
height: 40vmax; /* высота блока */
background-color: blue; /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "viewportMin">viewportMin<br>w&h - 40vmin</div>
		<div class = "viewportMax">viewportMax<br>w&h - 40vmax</div>
	</body>
</html>

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

 400px (текущее минимальное значение viewport области просмотра) * 40% = 160px

Для высоты расчёт аналогичен:

 400px (текущее минимальное значение viewport) * 40% = 160px.

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px.
Высота - 700px (текущее максимальное значение viewport) * 40% = 280px.

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

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

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

Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:

IE работает только с версии 9.0 (поддерживает значение vm, вместо vmin).
IE 10, IE 11 не поддерживают значение vmax.
Edge 12, 13, 14 не поддерживают значение vmax.

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

Например:

i {
font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов <i> */
}

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

Значение	Описание
medium	Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small	Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small	Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small	Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller	Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large	Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large	Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large	Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger	Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

<!DOCTYPE html>
<html>
<head>
	<title>Ключевые слова для управления размером шрифта</title>
<style>
.medium {font-size: medium;}
. small {font-size: small;}
.x-small {font-size: x-small;}
.xx-small {font-size: xx-small;}
.smaller {font-size: smaller;}
.large {font-size: large;}
.x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
.larger {font-size: larger;}
</style>
</head>
	<body>
		<div class =  "medium">Блок с ключевым словом medium</div>
		<div class =  "small">Блок с ключевым словом small</div>
		<div class =  "x-small">Блок с ключевым словом x-small</div>
		<div class =  "xx-small">Блок с ключевым словом xx-small
			<div class =  "smaller">Блок с ключевым словом smaller</div>
		</div>
		<div class =  "large">Блок с ключевым словом large</div>
		<div class =  "x-large">Блок с ключевым словом x-large</div>
		<div class =  "xx-large">Блок с ключевым словом xx-large
			<div class =  "larger">Блок с ключевым словом larger</div>
		</div>
	</body>
</html>

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

Практическое задание № 13
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:
```
body, div { /* создаем групповой селектор */
font-size: 150%; /* устанавливает размер шрифта 150% */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 14
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:
```
body, div { /* создаем групповой селектор */
font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 15
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:
```
body, div { /* создаем групповой селектор */
font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).

Единицы измерения | Основы вёрстки контента

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

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

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

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

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

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

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

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

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

div {
  height: 100px;

  /* Блочный элемент занимает строго 100 пикселей. Реальный размер (в сантиметрах) может отличаться на разных устройствах */
}

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

cm — сантиметры
mm — миллиметры
Q — четверть миллиметра
in — дюйм
pc — пайка/пика. Термин из типографики
pt — пункт

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

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

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

Относительные единицы, рассчитывающиеся от размера шрифта.
Относительные единицы, рассчитывающиеся от размера экрана. Это немного грубое сравнение — на самом деле расчёт ведётся от размера viewport. О том, что это такое, вы узнаете из курса по адаптивности.

Проценты

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

<html>
  <body>
    <!-- body — дочерний элемент html. html — родительский элемент для body -->
    <main>
      <!-- main — дочерний элемент body. body — родительский элемент для main -->
      <section>
        <!-- section — дочерний элемент main. main — родительский элемент для section -->
        <p><!-- p — дочерний элемент section. section — родительский элемент для p --></p>
        <div><!-- div — дочерний элемент section. section — родительский элемент для div --></div>
      </section>
    </main>
  </body>
</html>

Рассмотрим на примере ширины и размера шрифта.

<section>
  <div>
    <p>Параграф текста</p>
  </div>
</section>

.w-400px {
  width: 400px;
}

.w-50p {
  width: 50%;
}

.size-50px {
  font-size: 50px;
}

. size-70p {
  font-size: 70%;
}

Что же здесь происходит? Разберёмся по шагам:

Для основного родительского <section> установлены размеры в абсолютных единицах измерения. Ширина 400 пикселей и размер шрифта 50 пикселей.
Вложенный <div> имеет размер 50%. Этот размер относительный и высчитывается относительно ближайшего родителя. У этого родителя размер 400 пикселей. Следовательно, размер блока будет 200 пикселей.
Параграф текста имеет размер шрифта 70%. Ближайший родитель с установленным размером шрифта — <section>. Параграфу установится размер шрифта в 70% от 50 пикселей. То есть 35px.

Интересным примером является установка процентов для тега или класса, который предполагает вложение друг в друга. Взгляните на следующий пример:

<ul>
  <li>Элемент 1
    <ul>
      <li>Элемент 1.1</li>
      <li>Элемент 1.2
        <ul>
          <li>Элемент 1. 2.1</li>
          <li>Элемент 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

.size-30px {
  font-size: 30px;
}

li {
  font-size: 70%;
}

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

Поразмыслили? Молодцы! Теперь посмотрим, как это выглядит:

Проанализируем результат:

Размер шрифта самого первого элемента <ul> — 30 пикселей.
Все элементы <li> имеют размер шрифта 70%. Это значит, что чем глубже список, тем меньше размер шрифта:
- Элементы 1, 2, 3, 4 будут иметь размер 21 пиксель.
- Элементы 1.1 и 1.2 лежат внутри элемент 1. Размер шрифта этого элемента 21 пиксель. Это следует из прошлого пункта. Теперь размер шрифта считается именно от 21 пикселя.
- Элементы 1.1 и 1.2 будут иметь размер 14.7 пикселя.
- Элементы 1.2.1 и 1.2.2 лежат внутри элемент 1.2. Размер шрифта этого элемента 14.7 пикселей. Это следует из прошлого пункта.
- Элементы 1.2.1 и 1.2.2 будут иметь размер шрифта 10.29 пикселя.

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

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

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

Тогда в чём смысл em? Эту единицу измерения можно использовать не только для шрифта, но и для любых других свойств, которые принимают числовое значение. Например, в следующем коде размер нижнего внешнего отступа будет 60px:

section {
  font-size: 30px;
}

section p {
  margin-bottom: 2em;
}

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

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

Вернёмся к примеру со списком. Заменив em на rem получим совершенно другой результат. 0.7rem высчитываются из одного и того же места, без учёта вложенности. Итого, каждый элемент будет иметь размер шрифта 11.2px. Это связано со стандартным значением размера шрифта в 16 пикселей у большинства браузеров.

Вы можете заметить, что размер шрифта в 30 пикселей у элемента <ul> не играет, в данном случае, никакой роли.

Относительные единицы, рассчитывающиеся от размера экрана

CSS позволяет задавать размеры относительно текущего размера viewport — размера окна браузера, доступного без прокрутки. Основными двумя единицами являются vw — ширина viewport и vh — высота viewport. Вы можете рассматривать это как процент от размера viewport.

Частый «кейс» с использованием таких единиц — создание секции на всю доступную область браузера.

<section></section>

body {
  margin: 0;
  padding: 0;
}

.one-screen-section {
  width: 100vw;
  height: 100vh;

  background: #80deea;
}

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

Дополнительные материалы

Абсолютные и относительные единицы измерения в спецификации W3C

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

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

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

Размер | CSS | WebReference

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

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

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

Табл. 1. Относительные единицы измерения
Единица	Описание
em	Размер шрифта текущего элемента
ex	Высота символа x
ch	Ширина символа 0 текущего элемента
rem	Размер шрифта корневого элемента

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

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

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.

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

Табл. 2. Относительные единицы измерения
Единица	Описание
vw	1% от ширины области просмотра
vh	1% от высоты области просмотра
vmin	1% от меньшего значения из ширины и высоты области просмотра
vmax	Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%

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

Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Табл. 3. Абсолютные единицы измерения
Единица	Описание
px	Пиксель
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Относительные единицы</title> <style> h2 { font-size: 30px; } p { font-size: 1.5em; } </style> </head> <body> <h2>Заголовок размером 30 пикселей</h2> <p>Размер текста 1.5 em</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Абсолютные единицы</title> <style> h2 { font-size: 24pt; } p { margin-left: 30mm; } </style> </head> <body> <h2>Заголовок размером 24 пункта</h2> <p>Сдвиг текста вправо на 30 миллиметров</p> </body> </html>

Примечание

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

Internet Explorer поддерживает единицу vm вместо vmin.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

px, in, cm, mm, pt, pc, em, ex 3 12 1 3.5 1 1
ch 9 12 27 20 7 1
rem 9 12 4 11.6 4.1 3.6
vw, vh 9 12 20 20 6 19
vmax 16 26 15 6. 1 19
vmin 9 12 20 15 6 19
px, in, cm, mm, pt, pc, em, ex
ch 4.4 2 37 7.1.1
rem 2.1 2 12 4
vw, vh 2.1 19 37 6
vmax 4.4 19 37 6.1
vmin 2.1 19 37 6
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Преобразование points в pixels, em и проценты – Zencoder
На практике часто бывает необходимо преобразовать одни единицы измерения в другие.
Наиболее часто это происходит при работе со шрифтами. Допустим, имеется ситуация, когда в Photoshop размер шрифта показывается в . А при верстке макета в CSS правилах необходимо прописать размер шрифта в пикселях или процентах.
Как быть в данной ситуации? Если дело касается Photoshop, то можно установить в настройках этой программы, чтобы она выдавала размер шрифта в пикселях. Данный метод дает приближенное значение размера шрифта в пикселях, так как многое зависит от того, в каком разрешении был создан макет в Photoshop.
Другим способом, который может быть даже предпочтительнее, является ручной перевод из одних единиц измерения в другие. Чтобы не производить каждый раз такие преобразования, ниже представлена таблица, к которой даны наиболее распространенные размеры шрифтов в различных единицах измерения.
Пользуясь этой таблицей, можно быстро перевести один размер в другой. В ней представлены единицы измерения , , и проценты. То есть, четыре самых распространенных типа, три из которых наиболее часто применяются при создании CSS-правил.
Таблица преобразования points в pixels, ems или проценты
Points Pixels Ems Проценты
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0. 75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1. 6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%
Отдельно стоит сказать, что не стоит путать и (). Это разные единицы измерения.
P.S.
В процессе изучения CSS-типографии столкнулся с очень интересным ресурсом по преобразованию одних единиц измерения в другие — пиксели в , проценты и пункты () — :
Помимо удобного способа конвертации одних единиц измерения в другие сервис предоставляет возможность получить готовый файл , отредактированный службой под выбранное значение базового шрифта. Плюс к этому, в данный файл включены готовые стили для правильного вертикального ритма под выбранный размер шрифта. Супер!
На этом все.
pointspixelemphotoshop Разница между единицами измерения CSS (px, pt, rem, em, vh, vw, ch, ex и остальные) | Брэдли Найс | Уровень повышен! Я видел много разработчиков (особенно новичков) и других людей, которые имеют дело с CSS, которые толком не знают разницы между единицами в CSS. И это вроде понятно — их так много, что легко запутаться. Позвольте мне пролить свет на эту тему. В этой статье я расскажу о трех типах единиц CSS: абсолютных, относительных и области просмотра. Как следует из названия, эти блоки имеют фиксированный размер. Они не меняются в зависимости от размера экрана или чего-то еще. Ведь сантиметр всегда остается сантиметром, верно? К ним относятся 0 см — сантиметры мм — миллиметры в — дюйма PT — точки px — пиксели PC — PICA 1 in = 2,54 см = 254 мм = 72 pt = 96 px = 6 pc — Здесь размер шрифта немного сложнее… В большинстве браузеров значение по умолчанию равно 16. Я предлагаю использовать это значение в качестве основы для любых относительных расчетов.Относительные единицы состоят из % — проценты em — размер шрифта элемента относительно его родителя (3em означает, что размер шрифта в 3 раза больше обычного) rem — размер шрифта элемента element, относительно корневого элемента html ch — ширина символа «0» (в моноширинных шрифтах все символы имеют одинаковую ширину) ex —x-высота используемого шрифта (высота « x») Обратите внимание, что ch и ex будут меняться в зависимости от используемого вами шрифта. Единицы области просмотра также являются относительными по своей природе, хотя они и отличаются от относительных единиц. Как следует из названия, они зависят от размера области просмотра вашего браузера. Они включают в себя: vw — % от ширины области просмотра vh — % высоты области просмотра vmin — % меньшего размера (ширины или высоты) — % max 9 размер (ширина или высота) пикселей — em — % — pt — ключевое слово | CSS-трюки Когда дело доходит до установки размера шрифта в CSS, у вас есть много вариантов. Вы можете применить «ключевое слово», например p { font-size: small; } или числовое значение. При использовании значения вам необходимо объявить единицу измерения, которая сама имеет четыре варианта. Что лучше? Конечно, это зависит. Давайте посмотрим: Ключевое слово Допустимые параметры для установки размера шрифта в ключевом слове: xx-маленький, x-маленький, маленький, средний, большой, x-большой и xx-большой , а также относительные ключевые слова меньше и больше . Удивительно, но размер ключевых слов практически одинаков для разных браузеров и платформ.См. ниже тестовую страницу в Opera, Firefox, IE 6 и Safari: . Обратите внимание, что, хотя они довольно близки, существуют различия в том, где разрываются строки, и в общей высоте абзаца. Только когда используется одно из ключевых слов относительного размера, «каскад» срабатывает, и размер шрифта родительского элемента влияет на дочерний. Например, если родительскому элементу присвоено значение средний , а дочернему элементу присвоено значение большой .Только больших будут использоваться для определения размера дочернего элемента. Однако, если родитель был установлен на средний , а дочерний был установлен на больший (обратите внимание, большой r не просто большой), дочерний элемент будет «увеличен» так, чтобы быть больше, чем родители. размер шрифта. Измените родителя, измените ребенка, отсюда и «каскад». Ключевые слова — отличный способ изменить размер шрифтов в Интернете. Один из наиболее популярных методов — установить размер шрифта ключевого слова в элементе body, а затем использовать относительный размер шрифта везде на странице.Это дает возможность действительно легко увеличивать или уменьшать размер шрифта на странице (например, с помощью JavaScript) и последовательно перемещать всю страницу вверх и вниз по размеру. Тем не менее, ключевые слова не обеспечивают точного управления вашей типографикой, поскольку выбор довольно ограничен. пикс. Если вам нужен детальный контроль, размер шрифтов в пикселях (px) — отличный выбор (мой любимый). На экране компьютера точность не превышает одного пикселя.С размером шрифта в пикселях вы буквально говорите браузерам отображать буквы ровно на такое количество пикселей по высоте: . Windows, Mac, псевдоним, сглаживание, кросс-браузерность, не имеет значения, шрифт, установленный на 14 пикселей, будет иметь высоту 14 пикселей. Но это не значит, что не будет каких-то вариаций. В приведенном ниже быстром тесте результаты были немного более последовательными, чем с ключевыми словами, но не идентичными: . Из-за характера значений пикселей они не каскадируются.Если родительский элемент имеет размер 18 пикселей, а дочерний — 16 пикселей, дочерний элемент будет 16 пикселей. Однако настройки размера шрифта можно использовать в комбинации. Например, если родительский элемент был установлен на 16 пикселей, а дочерний — больше, дочерний элемент действительно получится больше, чем родитель. Быстрый тест показал мне это: «Больше» увеличило 16 пикселей родителя до 20 пикселей, что на 25% больше. В прошлом пикселей получили плохую обертку из-за проблем с доступностью и удобством использования.В IE 6 и более ранних версиях размер шрифта, установленный в 90 119 пикселях, не может быть изменен пользователем 90 120 . Это означает, что мы, модные молодые здоровые дизайнеры, можем установить шрифт размером 12 пикселей и прекрасно читать его на экране, но когда люди, которые немного длиннее в зубах, увеличивают размер, чтобы они могли его прочитать, они не могут этого сделать. На самом деле это вина IE 6, а не наша, но мы имеем то, что имеем, и нам приходится с этим справляться. Установка размера шрифта в пикселях является наиболее точным (и, на мой взгляд, наиболее удовлетворительным) методом, но при этом необходимо учитывать количество посетителей, которые все еще используют IE 6 на вашем сайте, и их потребности в специальных возможностях. Мы находимся на грани того, что нам больше не нужно заботиться об этом. эм Значения Em, вероятно, являются наиболее сложными значениями для того, чтобы обернуть старую лапшу, вероятно, потому, что само их понятие является абстрактным и произвольным. Вот совок: 1em равен текущему размеру шрифта рассматриваемого элемента. Если вы нигде на странице не установили размер шрифта, то это будет значение браузера по умолчанию, которое, вероятно, равно 16px. Так что по умолчанию 1em = 16px. Если бы вы пошли и установили размер шрифта 20px на вашем теле, то 1em = 20px. Исторически я думаю, что значение «em» основано на ширине буквы M в верхнем регистре, но не цитируйте меня по этому поводу. С em все становится немного сложнее, когда мы начинаем настраивать более сложные размеры шрифта. Скажем, нам нужен заголовок с большим размером шрифта, поэтому мы устанавливаем h2 { font-size: 2em; } Это «2» по существу является множителем текущего значения em. Таким образом, если текущий размер em составляет 16 пикселей, этот тег заголовка будет иметь размер 32 пикселя. Эта математика работает четко, но вы можете себе представить, что часто это не так, и необходимо округление. Самый популярный метод работы со значениями em — установить размер шрифта для основного текста на 62,5%. Поскольку размер шрифта браузера по умолчанию составляет 16 пикселей, это делает его 10 пикселей (без жесткой установки на 10 пикселей, что не будет каскадным). Использовать 10 в качестве множителя намного проще, чем 16. Таким образом, вам нужен размер шрифта 18px? Используйте размер шрифта: 1.8em. Так зачем же все это дело с em, когда это просто абстракция использования значений пикселей? Три возможные причины: Изменяемый размер ARE в IE 6 Отношение к другим размерам (ширина эластичных участков) Каскад Эма как мо-фо Первый большой.Если вы в основном хотите использовать пиксели, но вам не нравятся проблемы с доступностью, em может быть билетом для вас. Em не только для шрифтов, это единица измерения, которую вы можете использовать для любой другой длины (высоты, ширины и т. д.). Сайты с эластичной шириной используют значения em для всего, что, по сути, делает сайт «масштабируемым», а это означает, что когда вы увеличиваете размер шрифта, все увеличивается вплоть до ширины сайта. Эмы имеют прямое отношение друг к другу таким образом. Если у вас есть блок высотой 10 em, а шрифт внутри размером 1 em, он займет ровно 1/10 высоты этого блока.Это точное пропорциональное соотношение делает значения em мощной техникой веб-дизайна. Есть одна потенциальная проблема с EM, касающаяся № 3. Они действительно каскадные. Каждое значение em относительно его родительского значения. Если вы используете em как прямую замену значений пикселей, это может вызвать проблемы. Например, вы можете установить размеры шрифта «p» (абзац) и «li» (элемент списка) равными 1,2 em. Выглядит отлично для вас сегодня, но завтра на сайте будет опубликован некоторый контент, в котором есть абзац внутри элемента списка. Эти два значения будут каскадными (1,2 x 1,2), и этот элемент списка будет больше по размеру шрифта, чем любой другой. Ничего не поделаешь, кроме удаления тега. % Работа с процентами довольно очевидна. То есть они работают именно так, как вы думаете. Если у родителя размер шрифта 20 пикселей, а у дочернего элемента размер шрифта 50%, получится 10 пикселей. Как и в случае с em, сама природа процентного размера заключается в том, что он является относительным. Он также каскадируется таким же образом, поэтому та же самая проблема, описанная выше для элемента списка и элемента абзаца, применима и здесь. Популярный метод использования процентов для определения размера шрифта состоит в том, чтобы установить разумный размер шрифта для основного текста (например, «маленький»), а затем использовать проценты для всего остального. Это позволяет вам заменить это ключевое слово в одном месте, чтобы масштабировать размер шрифта на всей странице, что значительно упрощает такие вещи, как функция интерфейса изменения размера шрифта. пт Последней единицей измерения, в которой можно объявлять размеры шрифта, являются значения в пунктах (pt). Значения точек предназначены только для печати CSS! Пункт — это единица измерения, используемая в реальной типографике чернилами на бумаге. 72 пункта = один дюйм. Один дюйм = один реальный дюйм, как на линейке. Ни дюйма на экране, что совершенно произвольно в зависимости от разрешения. Точно так же, как пиксели на мониторах абсолютно точны для определения размера шрифта, размеры точек на бумаге точны. Для достижения наилучших кроссбраузерных и кроссплатформенных результатов при печати страниц настройте таблицу стилей печати и установите размер всех шрифтов в пунктах. На всякий случай, причина, по которой мы не используем размеры точек для отображения на экране (кроме того, что это абсурдно), заключается в том, что результаты в разных браузерах сильно различаются: Vmin CSS: Единицы в CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, . ..) CSS знает несколько единиц измерения. Самая известная единица — пиксели, но есть и другие единицы, которые не так популярны, но очень удобны в некоторых случаях использования. В этой статье рассматриваются относительные единицы, абсолютные единицы и единицы области просмотра. СМИ Рекомендуется Периодическое использование Нечастое использование Не рекомендуется Экран см, бэр, % пикс. ch, ex, vw, vh, vmin, vmax см, мм, дюйм, пт, шт Печать см, бэр, % см, мм, дюйм, пт, шт ч, бывший пикселей, vw, vh, vmin, vmax Относительные единицы В отличие от абсолютных единиц, таких как пиксели, точки или сантиметры, вы также можете определить размеры в относительных единицах, таких как проценты, em или бэр. Относительные блоки также соответствуют стандартам доступности. В большинстве браузеров размер шрифта по умолчанию равен 16px , вы можете использовать это значение в качестве основы для вычислений (например, 16px равно 1em, 1rem или 100%). Блок Описание % процент эм размер шрифта элемента (например, 2.5em означает, что шрифт в 2,5 раза больше, чем обычный шрифт) рем размер шрифта корневого элемента документа ч ширина символа «0», в моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch равен 1 символу бывший x высота текущего шрифта, измеренная на высоте нижнего регистра x В чем разница между emи rem? Разница заключается в наследовании.Значение rem основано на корневом элементе ( html ). Каждый дочерний элемент использует размер шрифта html в качестве основы для расчета. em , с другой стороны, зависит от размера шрифта родительского элемента. rem значительно упрощает расчет размера шрифта. Для вложенных элементов или даже нескольких вложенных элементов (например, списков) размер шрифта больше не нужно вычислять по отношению к размеру шрифта родительского элемента. rem всегда рассчитывает размер шрифта по отношению к тегу html . Различные семейства шрифтов Все шрифты имеют одинаковый размер (18pt), но красная полоса указывает на то, что x-высота ( ex ) у шрифтов разная. Шрифты снова имеют тот же размер (18pt). На этом графике сравнивается ширина символа ( ch ). Моноширинные шрифты имеют одинаковую ширину для каждого символа, тогда как шрифты с засечками или без засечек могут иметь разную ширину для каждого символа ( и уже, чем или ). Абсолютные единицы Абсолютные единицы фиксированы в его размере, вы не можете обсуждать длину сантиметра. Если у вас есть случай, когда требуется точная длина, вы должны использовать абсолютные единицы измерения (например, для компонентов, размер которых не должен изменяться). Они также могут быть полезны, если вы хотите определить ограничения, чтобы области не стали слишком широкими или слишком узкими. Абсолютные единицы не меняются в зависимости от размера экрана, направления или других изменений. Блок Описание см см 1 см = 1 см мм миллиметра 10 мм = 1 см в дюйма 1 дюйм = 96 пикселей = 2.54 см пикселей пикселей 1 пиксель = 1/96 от 1 в пт балла 1 балл = 1/72 от 1 в шт. Пика 1 шт. = 12 точек Единицы области просмотра единицы области просмотра представляют собой процент от текущей области просмотра браузера. Отличие от процентных единиц заключается в том, что единицы области просмотра всегда рассчитываются как процент от размера области просмотра браузера.В то время как процентные единицы наследуют размер своего родительского элемента. Блок Описание фольксваген 1% ширины области просмотра (50% означает половину ширины области просмотра) вх 1% высоты области просмотра (50% означает половину высоты области просмотра) об/мин 1% меньшего (vw или vh) размера области просмотра вмакс 1% большего (vw или vh) размера области просмотра vmin и vmax могут изменяться при изменении размера окна браузера или изменении ориентации мобильного телефона. vmin — это минимум между высотой и шириной области просмотра в процентах, в зависимости от того, что меньше. vmax — это максимум между высотой и шириной области просмотра в процентах, в зависимости от того, что больше. Если вам нравится мой контент, вы можете подписаться на меня в Твиттере?! @fullstack_to Изображение на обложке Уильяма Уорби на Unsplash Таблица преобразования размера текста CSS Таблица преобразования размера текста CSS По точкам, пикселям, em/rem и процентам. Примечания: Размер шрифта :root составляет 16 пикселей. Расчетный размер em и % зависит от родителя/предков. Реальный отображаемый размер может зависеть от шрифта, браузера и операционной системы. 1 пикс = 0,75 балла; 1 балл = 1,333333 пикселей Таблица преобразования размера текста CSS Очки пикселей Эмс/Ремс Процент Ключевое слово 6 точек 8px 0. 5эм 50% 7 точек 9px 0,55 мм 55% 7,5 пт 10 пикселей 0,625эм 62,5% х-маленький 8 точек 11px 0,7эм 70% 9 пунктов 12px 0,75 эм 75% 10 точек 13px 0.8эм 80% маленький 10,5 пт 14px 0,875эм 87,5% 11 точек 15px 0,95эм 95% 12 точек 16px 1эм 100% средний 13 точек 17px 1,05эм 105% 13,5 пт 18px 1.125эм 112,5% большой 14 точек 19px 1,2эм 120% 14,5 пт 20 пикселей 1,25 мм 125% 15 точек 21px 1. 3эм 130% 16 точек 22px 1,4 мм 140% 17 точек 23px 1.45эм 145% 18 точек 24px 1,5 мм 150% х-большой 20 точек 26px 1,6 мм 160% 22 пункта 29px 1,8 мм 180% 24 пункта 32px 2эм 200% xx-большой 26 точек 35px 2.2эм 220% 27 точек 36px 2,25 эм 225% 28 точек 37px 2,3эм 230% 29 пунктов 38px 2,35 эм 235% 30 точек 40px 2,45 эм 245% 32 пункта 42px 2,55 эм 255% 34 точки 45px 2. 75эм 275% 36 точек 48px 3эм 300% EM против REM против PX. Что следует использовать? Споры велись много раз — какие единицы измерения мы должны использовать в нашем CSS? Мы, как и многие другие ^[1][2] , были готовы отказаться от REM и вернуться к любимому пикселю. Мы потеряли понимание того, почему мы вообще начали использовать REM. Проблема не только в размерах шрифтов, но и в доступности. TL;DR: Пиксели невежественны, не используйте их. Используйте REM для размеров и интервалов. Используйте EM для медиа-запросов. пикселей пикселя (px) — это то, к чему мы все привыкли за эти годы. Все знают, что такое пиксель (хотя размер пикселя не всегда одинаков, но это в другой раз). Всем удобно использовать пиксели. Они легко переводимы. Дизайнеры обычно работают с пикселями, поэтому размеры можно брать непосредственно из Photoshop прямо при построении. Так что же не так с пикселями? Доступность Я большой сторонник доступности в Интернете. В любой день доступность важнее красоты. Если вы устанавливаете все размеры шрифта, размеры элементов и интервалы в пикселях, вы неуважительно относитесь к конечному пользователю. В большинстве браузеров пользователь может установить размер шрифта браузера по умолчанию, отличный от размера по умолчанию (обычно 16 пикселей). Если пользователь устанавливает значение по умолчанию 20 пикселей, все размеры шрифтов должны масштабироваться соответствующим образом. Однако, если веб-сайт явно устанавливает размер шрифта в пикселях, заголовок, установленный на 30 пикселей, всегда будет 30 пикселей. Это может звучать здорово с точки зрения дизайнера/разработчика, но вы не пользователь, перестаньте делать сайты для себя. К счастью, установка размера шрифта в пикселях не полностью нарушает доступность. Пользователь по-прежнему может увеличивать и уменьшать масштаб с помощью Ctrl Plus +/- (cmd вместо Ctrl в OS X). Однако мы можем сделать лучше. РЗМ Если вы хоть как-то знакомы с миром веб-дизайна, вы, несомненно, слышали о REM.Если нет, REM — это способ установки размеров шрифта на основе размера шрифта корневого элемента HTML. Они также позволяют быстро масштабировать весь проект, изменяя размер корневого шрифта (например, при определенном медиазапросе/размере экрана). «Единица [REM] представляет размер шрифта корневого элемента (например, размер шрифта элемента). При использовании для размера шрифта в этом корневом элементе он представляет его начальное значение». ^[3] Как рассчитать PX из REM Простой и наиболее распространенный пример: размер шрифта html установлен на 10px, абзац установлен на 1.6рем — 1,6рем * 10 пикселей = 16 пикселей. Установка размера корневого шрифта в 10 пикселей является наиболее распространенным сценарием, когда я вижу людей, использующих REM. Это позволяет быстро преобразовать значения пикселей в значения REM, просто разделив число на 10. Однако при установке базового размера шрифта в пикселях возникает та же проблема, что и в приведенном выше примере с пикселями. Доступ переопределен. Хотя у REM, безусловно, есть свое применение, я готов поспорить, что большинство людей используют REM, потому что они считаются круче, чем пиксели.Я редко вижу проект, в котором кто-то фактически меняет размер корневого HTML-шрифта в зависимости от размера экрана; и это правильно. Если у вас не очень типографически тяжелый дизайн, вы вряд ли захотите масштабировать все сразу. Итак, как мы можем исправить нашу ошибку доступности? Установите размер шрифта корня HTML в процентах. Это процент от размера шрифта браузера пользователя по умолчанию. Типичным методом является установка размера шрифта HTML на 62,5%. Это потому, что 62,5% от 16 пикселей (типичный размер шрифта браузера по умолчанию) составляет 10 пикселей.Это все равно составит 1,6rem = 16px. Теперь это означает, что если размер шрифта браузера пользователя по умолчанию изменится, например, на 20px, 1. 6rem теперь будет равняться 20px. Так что, если ваш пользователь хочет большие шрифты, позвольте им. Счастливый дизайнер. Счастливый разработчик. Со всеми числами по-прежнему легко работать. Идеальным сценарием было бы оставить размер шрифта HTML равным 100%, но это немного усложняет математику. Например, 16 пикселей теперь равны 1 бэр, 20 пикселей – 1,25 бэр, 24 пикселя – 1,5 бэр и т. д. Sass/SCSS спешит на помощь Работа со всеми этими числами в уме заняла бы довольно много времени.К счастью, если вы используете Sass/SCSS, LESS или любой другой препроцессор CSS, вам не о чем беспокоиться. Вы можете использовать функции, чтобы вычислить эти вещи для вас. А как насчет EM? EM изначально работают аналогично REM, пока не дойдет до вложения. Я никогда не был поклонником EM, особенно когда дело доходит до размеров шрифта. Например, возьмите div с размером шрифта 2em, затем добавьте абзац с размером шрифта 2em. Размер шрифта этого абзаца теперь равен 2ems относительно div. Я быстро теряю счет математике и размеру, и это быстро становится неуправляемым. Это то, что решают REM: размер всегда относится к корню. А как насчет медиа-запросов? Итак, мы установили, что использование значений в пикселях переопределяет настройки браузера по умолчанию, поэтому лучше просто преобразовать все размеры в пикселях в REM, верно? Не совсем. В этом сообщении блога освещаются некоторые ключевые различия между использованием пикселей, EM и REM в медиа-запросах (https://zellwk.com/blog/media-query-units/). Иди прочитай, а потом возвращайся. Таким образом, и пиксели, и REM для медиа-запросов не работают в различных браузерах при использовании масштабирования браузера, и EM — лучший вариант, который у нас есть. На данный момент REM выходят из строя гораздо чаще, чем пиксели, поэтому мы полностью исключаем их. Однако тут все немного сложнее. И EM, и пиксели имеют свои недостатки в медиа-запросах, когда речь идет о разнице десятичных разрядов этой единицы. Если вам случится использовать медиа-запросы минимальной и максимальной ширины в одном и том же блоке кода, у вас будут плохие времена, как только пользователь начнет изменять масштаб браузера или размер шрифта по умолчанию. Вот несколько примеров: Мы используем 6 знаков после запятой, потому что некоторые браузеры не показывают разницы между 2–5.d.p. Для ясности мы используем размер шрифта 10 пикселей для основного текста, чтобы сделать математические расчеты более понятными. Пример 1. Масштаб браузера установлен на 100%, ширина браузера установлена на 640 пикселей минимальная ширина: 64em = попадание максимальная ширина: 63,99 em = мисс max-width: 63.999999em = хит минимальная ширина: 640 пикселей = попадание максимальная ширина: 639 пикселей = мисс максимальная ширина: 639,999999 пикселей = мисс Пример 1b. Масштаб браузера установлен на 100%, ширина браузера установлена на 639 пикселей минимальная ширина: 64em = мисс максимальная ширина: 63. 99em = хит max-width: 63.999999em = хит минимальная ширина: 640 пикселей = мисс максимальная ширина: 639 пикселей = попадание максимальная ширина: 639,999999 пикселей = хит Таким образом, мы не можем использовать 6 dp для EM, потому что это затрагивает оба медиа-запроса. Пример 2. Масштаб браузера установлен на 110 %, ширина браузера установлена на 704 пикселя (поскольку 640 пикселей * 110 % = 704 пикселя) минимальная ширина: 64em = мисс максимальная ширина: 63,99 em = мисс max-width: 63.999999em = хит минимальная ширина: 640 пикселей = мисс максимальная ширина: 639 пикселей = мисс максимальная ширина: 639,999999 пикселей = хит Пример 2б. Масштаб браузера установлен на 110%, ширина браузера установлена на 705 пикселей минимальная ширина: 64em = попадание максимальная ширина: 63.99эм = Мисс максимальная ширина: 63.999999em = мисс минимальная ширина: 640 пикселей = попадание максимальная ширина: 639 пикселей = мисс максимальная ширина: 639,999999 пикселей = мисс Так что мы не можем использовать 2dp для EM. Итак, все, что у нас осталось на этом этапе, — это 6dp пикселей. Это работает с масштабированием браузера. Однако… Пример 3. Масштаб браузера установлен на 100%, размер шрифта браузера установлен на 20 пикселей, ширина браузера установлена на 800 (поскольку 640 * 125% = 800) минимальная ширина: 64em = попадание максимальная ширина: 63,99 em = мисс максимальная ширина: 63,999999em = попадание Опять же, 6dp EM по-прежнему отсутствуют.И мы вообще не можем использовать пиксели для медиа-запросов, потому что они по-прежнему срабатывают на 640px/639px, потому что игнорируют EM/REM. Так какое решение? К сожалению, ответа нет. Пока браузеры не разберутся с округлением, мы немного застряли. Простейший приемлемый вариант заключается в том, что мы никогда не создаем перекрытие минимальной и максимальной ширины в одном и том же блоке. Пример: тело { Экран @media и (максимальная ширина: 63,99 em) { фон: синий; } Экран @media и (минимальная ширина: 64em) { фон: синий; } } Проблема с вышеизложенным заключается в том, что существуют определенные сценарии, когда оба медиа-запроса выполняются или оба игнорируются. Так что безопаснее было бы написать что-то вроде: .тело { фон: синий; Экран @media и (минимальная ширина: 64em) { фон: синий; } } Почему нет настоящего решения? Я не верю, что достаточно людей заботятся. Любая статистика, говорящая о том, что люди не меняют размер шрифта в браузере по умолчанию, определенно искажена. Параметры Chrome для изменения размера шрифта по умолчанию теперь скрыты в расширенных параметрах браузера. Ловушки В этом подходе есть несколько подводных камней: Если вы привыкли писать медиа-запросы как минимальной, так и максимальной ширины в одном блоке кода, это займет больше времени. Это увеличивает сложность, так как вам придется переопределять CSS в том или ином направлении, а не указывать браузеру использовать вариант A или B. Из-за этих переопределений размер файла увеличится. Ненамного, но это стоит учитывать. В зависимости от проекта, того, кто его разрабатывает, и различных других факторов, таких как бюджет проекта (здесь мы должны быть реалистами), пиксели могут быть проще и быстрее. Также может быть проще и быстрее игнорировать специальные возможности. Помните, для кого вы создаете веб-сайты. Также стоит отметить, что это сообщение в блоге было точным на момент написания, но с постоянными обновлениями работы браузеров эта проблема может уйти в прошлое. Просто используйте пиксели Р.И.П. REM, эталонный пиксель Viva CSS! Длина — сеть разработчиков Mozilla пикселей против относительных единиц в CSS: почему это все еще важно Да здравствует современный браузер! В наши дни браузеры становятся лучше.Кажется, мы живем в золотой век, когда пользователей, получающих доступ к странице, добавляют бесконечный поток новых функций, а для тех, кто создает страницу, добавляются действительно отличные инструменты. Однако так было не всегда. Ранние версии сегодняшних браузеров имели ограниченные возможности, и нам приходилось думать, как работать с ними — или обойти их — при проектировании и разработке наших сайтов. Статические и адаптивные макеты были обычным явлением, а наши сайты были разработаны с точностью до пикселя.Конечно, при реализации наших макетов в рамках ограничений, предоставляемых браузерами, было задействовано отдельных различных гимнастических действий по перемещению пикселей. По мере того, как функции браузера совершенствовались, а такие методы, как Fluid Grid, становились все более распространенными, то, как мы кодировали наши сайты, превратилось в совершенно новую парадигму. Мы отказались от определения и кодирования наших единиц измерения в пикселей и начали более последовательно использовать относительные единицы измерения CSS и безразмерные значения в нашем CSS, чтобы удовлетворить потребности постоянно меняющихся размеров области просмотра. Перенесемся в настоящее: производители браузеров добавили дополнительные функции, позволяющие нам создавать гибкие и надежные проекты простым способом. Возьмем, к примеру, масштабирование браузера. Когда пользователь масштабирует страницу в современном браузере, все масштабируется вверх или вниз пропорционально, в зависимости от предпочтений пользователя. Ну хоть должно . Почему масштабирование в браузере так важно? Предоставление пользователю возможности контролировать свой опыт просмотра веб-страниц не является новой концепцией , на самом деле это то, о чем писали на заре Интернета.В последнее время эта концепция, похоже, была забыта, поскольку функции браузера улучшились. Самая важная причина использования адаптивных и безразмерных значений в нашем CSS заключается в поддержке наших пользователей, которые полагаются на масштабирование . Если вы читали Руководство по доступности веб-контента, наши пользователи должны иметь возможность масштабировать область просмотра без потери содержимого или функциональности или ограничений, налагаемых значениями CSS или настройками масштабирования области просмотра. В частности, необходимо выполнить несколько критериев успеха: WCAG 1.4.4: Пользователи должны иметь возможность изменять размер текста без вспомогательных технологий до 200 процентов, без потери содержимого или функциональности. (Уровень АА) WCAG 1.4.8: в идеале мы должны обеспечить соответствующий интервал между строками и абзацами, и мы не должны требовать от пользователя горизонтальной прокрутки, чтобы прочитать строку текста в полноэкранном окне. (Уровень ААА) WCAG 1.4.10: пользователи должны иметь возможность изменять размер текста без необходимости прокрутки как по горизонтали, так и по вертикали, чтобы прочитать это содержимое.(Уровень АА) Дизайн-системы и потоки согласованности Как человек, работающий над O’Reilly Media Design System, первоочередной задачей является сплетение нитей согласованности между брендом, стилем и компонентами пользовательского интерфейса. Согласованность в системе позволяет дизайнерам и разработчикам создавать отличные приложения для конечных пользователей. Тем не менее, самая важная нить , которая соединяет все элементы гобелена системы дизайна, — это устоявшиеся передовые методы доступности — для цветов, типографики, компонентов, шаблонов. В случае определения стилей типографики системы устанавливаются стандарты для таких вещей, как визуальная иерархия и ритм типографики. Часто дизайнер начинает макеты в Sketch или другой программе, основанной на дизайне, и указывает размер шрифта и значения высоты строки для типографики в пикселях. Этот подход может хорошо работать для целей статического макета, но есть одна загвоздка. Тем не менее, пиксельный типографический подход не будет работать как стратегия CSS, когда браузеры — и особенно масштабирование браузера — вводят изображение. Дебаты о масштабировании браузера На этом этапе процесса разработки дизайн-системы могут начаться дебаты. На самом деле, у нашей команды были очень оживлённые дебаты по этому поводу, когда наша дизайн-система была перезагружена — и я заметил, что наши стили CSS типографики использовали значения высоты строки на основе пикселей, как это было определено в Sketch нашим дизайнером. Вот некоторые из аргументов в пользу использования пикселей в CSS: «Браузеры берут на себя все масштабирование шрифта за нас, поэтому нам не нужно преобразовывать типографику в относительные единицы в CSS.Пользователи не утруждают себя настройкой параметров отображения шрифта в браузере, здесь наша работа выполнена!» <пыль с рук> Вот некоторые из опровержений использования относительных единиц CSS: «Да, браузеры обрабатывают для нас масштабирование страницы, но есть 90 998 различий между тем, как выглядит пользовательский интерфейс при масштабировании страницы, 90 998 в зависимости от того, используется ли браузер по умолчанию. Размер также был скорректирован . Пользователи утруждают себя настройкой параметров отображения шрифта в браузере, поэтому нам нужно учитывать это в наших объявлениях CSS. Итак, исследование началось. Когда я впервые начал искать рекомендации о том, является ли использование пикселей в CSS в целом хорошей идеей, я нашел противоречивые мнения по этому вопросу, например, статьи, подобные этой, описывающие, почему вы должны просто использовать пиксели или должны прекратить использовать пиксели. в CSS. Статьи об адаптивном размере в медиазапросах. Даже хорошая статья о специальных возможностях при изменении размера текста о поведении старых браузеров. Не было много упоминаний — или соображений — о том, что пользователи действительно копаются в расширенных настройках браузера, чтобы изменить размер шрифта по умолчанию.К счастью, я наткнулся на упоминание об этом в документации MDN, в действительно хорошей статье Эвана Минто, в которой подробно рассматриваются пользовательские данные, и в разделе на странице Every Layout, посвященном элементарным единицам измерения. Последние три статьи были особенно интересны, но даже с учетом количества предоставленной информации, одна вещь, которая отсутствовала во всем этом, была параллельным примером . В частности, пример того, как выглядит блок текста, использующий значения пикселей, по сравнению с блоком текста, использующим относительные или безразмерные значения, в сценарии масштабирования браузера. Особенно, если пользователь меняет настройку шрифта по умолчанию под капотом. Что вы подразумеваете под установкой шрифта по умолчанию? Возможно, вы знакомы с настройкой масштабирования страницы в браузере, которая пропорционально увеличивает все содержимое страницы. Однако менее известная функция большинства браузеров — возможность настроить предпочтительный размер шрифта. Эта функция работает независимо от функции масштабирования страницы. Например, это параметры, используемые для раскрывающегося меню размера шрифта в настройках внешнего вида Chrome — от очень маленького (9 пикселей) до очень большого (24 пикселя) — с рекомендуемым по умолчанию средним значением 16 пикселей. Если вы измените один из этих параметров в своем браузере, в идеале все ваши шрифты будут увеличиваться (или уменьшаться) пропорционально размеру этого параметра шрифта. В идеале , то есть, если вы используете относительные единицы измерения CSS. Эта настройка размера шрифта браузера не повлияет на типографику, использующую пиксели для font-size и/или line-height . Это подводит нас к столь необходимому примеру. Наглядное сравнение Давайте посмотрим, как текстовый блок отображается в браузере при увеличении до 200 % с использованием различных настроек масштабирования страницы и размера шрифта по умолчанию. Этот Codepen отображает три контейнера текста при настройке масштаба страницы 100% и размере шрифта браузера по умолчанию при рекомендуемом значении среднего (16 пикселей). См. Pen by resource11 на CodePen. свет Размер шрифтов и значения высоты строки совпадают, но используются разные единицы измерения. Левый контейнер использует пикселей для размера шрифта и высоты строки. Средний контейнер использует rems для размера шрифта и пикселей для высоты строки. Правый контейнер использует rems для размера шрифта и безразмерных значений для высоты строки. Если вы настроите параметр масштабирования страницы на 200 % и сохраните размер шрифта браузера по умолчанию (16), между контейнерами не будет заметных различий. Пользователи могут устанавливать размер шрифта браузера, не касаясь масштабирования страницы, поэтому давайте вернем параметр масштабирования страницы обратно на 100% и изменим размер шрифта браузера на очень большой, чтобы посмотреть, изменится ли что-нибудь. Обратите внимание, как текст в среднем и правом примерах, использующих rems для размера шрифта, масштабируется до кратного размера шрифта корневого уровня, что в 1,5 раза превышает размер шрифта по умолчанию (16), а пример на left остается прежним, потому что значение шрифта по-прежнему статично (с использованием пикселей), а не отзывчиво (с использованием rems). Хотя средний и правый примеры правильно увеличивают размер шрифта, обратите внимание, что межстрочный интервал в текстовом блоке в среднем примере выглядит очень сжатым. Этот сжатый межстрочный интервал возникает из-за того, что в этом центральном примере используется значение высоты строки, заданное в абсолютном значении длины (в пикселях), а не в относительном значении. Тем не менее, стоит отметить, что установка значения на основе длины или даже на основе процента для высоты строки имеет плохое поведение наследования CSS и может привести к неожиданным результатам, таким как сжатый межстрочный интервал в среднем примере. Узкий межстрочный интервал может быть сложно проанализировать, если у вас есть когнитивные нарушения, поэтому не рекомендуется использовать значение на основе длины или даже на основе процента для высоты строки, особенно если вы используете относительные единицы для размера шрифта. . Что на мгновение возвращает нас к левому примеру. Хотя в левом примере также используются значения высоты строки на основе длины в сочетании с размером шрифта на основе длины, наша цель — поддержать пользователей, которым необходимо изменить размер шрифта по умолчанию в своем браузере. Выбор основанных на длине значений для размера шрифта и высоты строки в этом примере слева может решить проблему сжатого межстрочного интервала, но не решить проблему отображения текста пользователем в соответствии с его личной настройкой размера шрифта браузера, поэтому использование длины Значения на основе для высоты строки не являются рекомендуемым подходом. Однако пример справа отображается с удобным межстрочным интервалом, поскольку для высоты строки используется относительное значение, а не абсолютное. Кроме того, это значение является безразмерным, а не основанным на длине, что рекомендуется для высоты строки. Безразмерное значение высоты строки вычисляется путем деления значения высоты строки контейнера в пикселях на размер шрифта в пикселях. В этом случае наш начальный размер шрифта составляет 16 пикселей, а начальное значение высоты строки — 24 пикселя, как показано в примере слева.Когда вы делите высоту строки на размер шрифта 24px/16px, результат равен 1,5, безразмерному значению. Использование этого безразмерного значения в правильном примере вместо использования значения на основе длины позволяет увеличить межстрочный интервал контейнера пропорционально размеру шрифта на основе rem, избегая при этом проблем с наследованием CSS. Конечным эффектом является более удобное чтение для пользователей, которые решили увеличить страницу и настроить размер шрифта браузера по умолчанию в соответствии со своими личными предпочтениями. Помните, однако, что мы все еще находимся в настройке масштаба страницы 100% с очень большим размером шрифта браузера. Пользователям также может потребоваться увеличить масштаб страницы при очень большом размере шрифта браузера. Например, если пользователь выбирает очень большой размер шрифта браузера и устанавливает масштаб страницы на 200 %, эта дополнительная гибкость может сделать чтение еще более удобным при увеличении. Если пользователь также использует один из параметров специальных возможностей операционной системы, например функцию масштабирования «картинка в картинке» в macOS, с использованием относительных единиц CSS вместо того, чтобы полагаться исключительно на пиксели, действительно повышает качество чтения в сценарии с плохим зрением. Эта дополнительная гибкость возвращает контроль над опытом пользователю там, где он принадлежит. Инструменты преобразования пикселей Если вы раньше не конвертировали пиксели в относительные единицы в CSS, вот несколько хороших инструментов, которые помогут вам начать работу. Завершение… Помните, что пользователи действительно меняют свои настройки неявно, и мы должны поддерживать контроль пользователей над их собственным просмотром. Если вы используете относительные единицы CSS для стилей типографики, вы можете поддерживать точность своих макетов, не оказывая негативного влияния на потребности ваших пользователей. Благодарности Большое спасибо команде Twenty Four Accessibility — Скотту О’Хара, Лиз Дэвис и особенно Саре Хигли и Кэри Фишер — за их опыт редактирования! Особенности и различия PX, EM, REM и Pt в CSS и подробное объяснение преобразования Введение в концепцию ： 1. PX (пиксель): Это виртуальная единица длины и единица длины цифрового изображения компьютерной системы. Если PX необходимо преобразовать в физическую длину, необходимо указать точность DPI (количество точек на дюйм).DPI обычно доступен во время сканирования и печати. По умолчанию используется разрешение 96 dpi для Windows и 72 dpi для Apple. 2、em (относительная единица длины относительно размера шрифта текста в текущем объекте): это относительная единица длины, которая изначально относится к ширине буквы M, поэтому она называется em. Теперь это относится к кратной ширине символа. Использование аналогично проценту, например, 0,8em, 1,2em, 2em и т. д. Обычно 1em = 16px. 3. Pt (точка, LB): Является единицей физической длины и относится к 72/1 дюйму.PT = 1/72 (дюйм), PX = 1/DPI (дюйм) 4. REM (корень EM): Это новая относительная единица в CSS3, которая привлекла большое внимание. В чем разница между этим блоком и em? Разница в том, что когда rem используется для установки размера шрифта для элемента, это все еще относительный размер, но относительным является только корневой элемент HTML. Эта единица сочетает в себе преимущества относительного размера и абсолютного размера. Он может не только пропорционально настроить все размеры шрифта, изменив корневой элемент, но и избежать цепной реакции послойного составного размера шрифта.В настоящее время все браузеры, кроме IE8 и более ранних версий, поддерживают rem. Для браузеров, которые его не поддерживают, решение тоже очень простое, то есть написать дополнительное объявление абсолютных единиц. Эти браузеры игнорируют размер шрифта, установленный с помощью rem. 1. ЭМ и РХ Что такое ПХ? пикс. Единица относительной длины. Пиксель PX относится к разрешению экрана дисплея. (цитата из руководства CSS2.0) EM — единица относительной длины.Размер шрифта относительно текста в текущем объекте. Если размер шрифта текущего встроенного текста не установлен искусственно, он определяется относительно размера шрифта браузера по умолчанию. (цитата из руководства CSS2. 0) Функции PX 1. Т.е. нельзя настроить размер шрифта, используя в качестве единицы измерения PX; 2. Большинство зарубежных веб-сайтов можно настроить, поскольку они используют em или rem в качестве единиц шрифта; 3. Firefox может настраивать Px, EM и REM, но более 96% китайских интернет-пользователей используют браузер IE (или ядро). Что это такое? EM относится к высоте шрифта. Высота шрифта по умолчанию в любом браузере составляет 16 пикселей. Поэтому все ненастроенные браузеры соответствуют: 1em = 16px. Тогда 12px = 0,75em, 10px = 0,625em. Чтобы упростить преобразование размера шрифта, вам нужно объявить размер шрифта = 62,5% в селекторе body в CSS, что изменит значение EM на 16px * 62,5% = 10px, так что 12px = 1,2em, 10px = 1em, то есть , вам нужно всего лишь разделить исходное значение PX на 10, а затем заменить em в качестве единицы измерения. Характеристики EM: 1em относится к размеру шрифта. Он наследует размер шрифта родительского элемента, поэтому это не фиксированное значение. Размер шрифта по умолчанию для любого браузера составляет 16 пикселей. Следовательно, 12px = 0,75em. В практическом применении для облегчения конвертации обычно задаются следующие стили: html { размер шрифта: 62,5%; } Таким образом, 1em = 10px. Наш обычно используемый 1.2em теоретически равен 12px. Однако это преобразование не работает в браузере IE.1.2em немного больше 12px. Решение состоит в том, чтобы изменить 62,5% стилей тегов HTML на 63%, то есть: html {размер шрифта: 63%; } В китайских статьях обычно два пробела в начале абзаца. Если в качестве единицы измерения используется PX, для шрифта размером 12 пикселей необходимо исключить 24 пикселя, а для шрифта размером 14 пикселей — 28 пикселей… Такое преобразование встречается очень редко. Если используется блок ЭМ, эта проблема хорошо решается. Размер одного слова — 1em, а размер двух слов — 2em.Поэтому просто определите его следующим образом: p {текстовый отступ: 2em; } Разница между единицами шрифта EM и PX Единица шрифта должна быть em вместо PX. Простая причина в том, что он поддерживает масштабирование шрифта в IE6. Нажмите Ctrl + колесико прокрутки на странице, и веб-сайты с блоком шрифтов PX не отвечают. PX — абсолютная единица измерения, т. е. масштабирование не поддерживается, а EM — относительная единица. Когда я настраивал этот блог, я обнаружил, что не только шрифт, но и единицы высоты строки и высоты по вертикали — em.Обеспечить целостность при масштабировании. ЭМ имеет следующие характеристики: 1. Значение ЭМ не является фиксированным; 2. EM унаследует размер шрифта родительского элемента. Шаги перезаписи EM: 1. Объявить размер шрифта = 62,5% в селекторе тела; 2. Разделите исходное значение PX на 10, а затем замените em в качестве единицы; Проще говоря, если вам нужны только два вышеуказанных шага для решения проблемы, никто не может использовать px. После двух вышеуказанных шагов вы обнаружите, что шрифт вашего веб-сайта превосходит воображение. Поскольку значение EM не является фиксированным и наследует размер родительского элемента, вы можете установить размер шрифта 1,2em в div содержимого, то есть 12px. Затем вы устанавливаете размер шрифта селектора p равным 1,2 em, но если P принадлежит дочернему элементу содержимого, размер шрифта P будет не 12 пикселей, а 1,2 em = 1,2 * 12 пикселей = 14,4 пикселя. Это связано с тем, что размер шрифта содержимого установлен на 1,2 em. Это значение EM наследует размер тела своего родительского элемента, то есть 16 пикселей * 62,5% * 1,2 = 12 пикселей, в то время как P, как его дочерний элемент, EM наследует высоту шрифта содержимого, то есть 12 пикселей.Следовательно, 1,2 em P больше не 12px, а 14,4px. 3. Пересчитайте значение EM для этих увеличенных шрифтов. Избегайте повторного объявления размера шрифта, то есть избегайте упомянутого выше явления 1,2 * 1,2 = 1,44. Например, если вы объявляете размер шрифта 1,2 em в #content, размер шрифта P может быть только 1 em вместо 1,2 em. Поскольку этот EM не является другим em, он становится равным 1em = 12px из-за унаследованной высоты шрифта #content. Китайские иероглифы размером 12 пикселей в том числе: Также было обнаружено странное явление при завершении преобразования EM, то есть 12px (1.2em) Китайские иероглифы, полученные вышеописанным способом, не равны размеру шрифта, прямо определяемому 12px в т.е., а чуть крупнее. Вам нужно только изменить 62,5% на 63% в селекторе тела для нормального отображения. Причина может заключаться в том, что когда ie обрабатывает китайские символы, точность значения с плавающей запятой ограничена. Это явление происходит только с китайскими иероглифами размером 12 пикселей, но не с английскими. Решение состоит в том, чтобы заменить 62,5% в style.css на 63%. 2. Характеристики РЗМ Rem — это новая относительная единица (корень em, корень EM) в CSS3, которая привлекла большое внимание.В чем разница между этим блоком и em? Разница в том, что когда rem используется для установки размера шрифта для элемента, это все еще относительный размер, но относительным является только корневой элемент HTML. Эта единица сочетает в себе преимущества относительного размера и абсолютного размера. Он может не только пропорционально настроить все размеры шрифта, изменив корневой элемент, но и избежать цепной реакции послойного составного размера шрифта. В настоящее время все браузеры, кроме IE8 и более ранних версий, поддерживают rem. Для браузеров, которые его не поддерживают, решение тоже очень простое, то есть написать дополнительное объявление абсолютных единиц.Эти браузеры игнорируют размер шрифта, установленный с помощью rem. дайте пример: p {размер шрифта: 14 пикселей; размер шрифта:.875rem;} будьте осторожны: Выбор единицы шрифта в основном определяется вашим проектом. Если ваша пользовательская база использует новейший браузер, рекомендуется использовать REM. Если рассматривать совместимость, PX или оба. 3. Таблица преобразования шрифтов Размер шрифта пт пикс. эм Начальный номер 42 пункта 56px 3.5em Xiaochu 36pt 48px 3em 34pt 45px 2.75em 32pt 42px 2.55em 30pt 40px 2.45эм 29pt 38px 2,35 эм 28 точек 37px 2,3эм 27pt 36px 2,25 эм Номер один 26pt 35px 2. 2эм 25 пунктов 34px 2.125em Младший 24 точки 32px 2эм Номер два 22 точки 29px 1,8 мм 20 пунктов 26px 1.6эм официант 18 точек 24px 1,5 мм 17пт 23px 1,45 эм Номер три 16 точек 22px 1,4 эм другая женщина 15 пунктов 21px 1. 3эм 14,5 пт 20 пикселей 1,25 эм Номер четыре 14 точек 19px 1,2эм 13,5 пт 18px 1.125em 13 пунктов 17px 1.05em Сяо Си 12 точек 16 пикселей 1эм 11пт 15px 0,95эм Номер пять 10,5 пт 14 пикселей 0,875эм 10 точек 13px 0.8эм Маленькая пятерка 9 пт 12 пикселей 0,75см 8 точек 11px 0,7эм шестой день месяца 7. 5pt 10 пикселей 0,625эм 7 пт 9px 0.55эм Сяо Лю 6.5pt 8px 0,5 см Номер семь 5.5pt 7px 0,4375em Номер восемь 5 пунктов 6px 0,375эм Это конец этой статьи об особенностях, различиях и преобразовании PX, EM, REM и Pt в CSS.Для получения дополнительной информации о CSS PX и EM, пожалуйста, выполните поиск в предыдущих статьях developmentpaer или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что вы поддержите developmentpaer в будущем! .No related posts.

Points	Pixels	Ems	Проценты
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0. 75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1. 6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

СМИ	Рекомендуется	Периодическое использование	Нечастое использование	Не рекомендуется
Экран	см, бэр, %	пикс.	ch, ex, vw, vh, vmin, vmax	см, мм, дюйм, пт, шт
Печать	см, бэр, %	см, мм, дюйм, пт, шт	ч, бывший	пикселей, vw, vh, vmin, vmax

Блок	Описание
%	процент
эм	размер шрифта элемента (например, 2.5em означает, что шрифт в 2,5 раза больше, чем обычный шрифт)
рем	размер шрифта корневого элемента документа
ч	ширина символа «0», в моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch равен 1 символу
бывший	x высота текущего шрифта, измеренная на высоте нижнего регистра x

Блок	Описание
см	см	1 см = 1 см
мм	миллиметра	10 мм = 1 см
в	дюйма	1 дюйм = 96 пикселей = 2.54 см
пикселей	пикселей	1 пиксель = 1/96 от 1 в
пт	балла	1 балл = 1/72 от 1 в
шт.	Пика	1 шт. = 12 точек

Блок	Описание
фольксваген	1% ширины области просмотра (50% означает половину ширины области просмотра)
вх	1% высоты области просмотра (50% означает половину высоты области просмотра)
об/мин	1% меньшего (vw или vh) размера области просмотра
вмакс	1% большего (vw или vh) размера области просмотра

Таблица преобразования размера текста CSS
Очки	пикселей	Эмс/Ремс	Процент	Ключевое слово
6 точек	8px	0. 5эм	50%
7 точек	9px	0,55 мм	55%
7,5 пт	10 пикселей	0,625эм	62,5%	х-маленький
8 точек	11px	0,7эм	70%
9 пунктов	12px	0,75 эм	75%
10 точек	13px	0.8эм	80%	маленький
10,5 пт	14px	0,875эм	87,5%
11 точек	15px	0,95эм	95%
12 точек	16px	1эм	100%	средний
13 точек	17px	1,05эм	105%
13,5 пт	18px	1.125эм	112,5%	большой
14 точек	19px	1,2эм	120%
14,5 пт	20 пикселей	1,25 мм	125%
15 точек	21px	1. 3эм	130%
16 точек	22px	1,4 мм	140%
17 точек	23px	1.45эм	145%
18 точек	24px	1,5 мм	150%	х-большой
20 точек	26px	1,6 мм	160%
22 пункта	29px	1,8 мм	180%
24 пункта	32px	2эм	200%	xx-большой
26 точек	35px	2.2эм	220%
27 точек	36px	2,25 эм	225%
28 точек	37px	2,3эм	230%
29 пунктов	38px	2,35 эм	235%
30 точек	40px	2,45 эм	245%
32 пункта	42px	2,55 эм	255%
34 точки	45px	2. 75эм	275%
36 точек	48px	3эм	300%