Содержание

pt | CSS | WebReference

Единица pt определяет размер в типографских пунктах. Один пункт равен 1/72 дюйма (2,54 см). Пункты часто применяются в текстовых редакторах, вроде Microsoft Word, LibreOffice Writer, Apple Pages и др.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>pt</title> <style> body { font-size: 14pt; /* Размер шрифта в пунктах */ } </style> </head> <body> <h2>Почему возможна интроекция?</h2> <p>Как отмечает Д. Майерс, у нас есть некоторое чувство конфликта, которое возникает с ситуации несоответствия желаемого и действительного.</p> </body> </html>

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

СпецификацияСтатус
CSS Values and Units Module Level 4Рабочий проект
CSS Values and Units Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
Спецификация

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

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

Браузеры

31213. 511
2.0410.11
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Справочник CSS

Значения свойств

Функции

Единицы CSS

Типы элементов

@-правила

Анимация

Границы

Контент

Логические

Отступы и поля

Печать

Позиционирование

Псевдоклассы

Псевдоэлементы

Размеры

Списки

Таблицы

Текст и шрифт

Флексы

Форматирование

Формы

Цвет и фон

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

На этой странице

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

Таблица рекомендуемых единиц в CSS

Media Рекомендуемые Редкое использование Нечастое использование Не рекомендуется
Экран em, rem, % px ch, ex, vw, vh, vmin, vmax cm, mm, in, pt, pc
Для печати em, rem, % cm, mm, in, pt, pc ch, ex px, vw, vh, vmin, vmax

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

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

Относительные единицы также соответствуют стандартам доступности .

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

Ед. изм Описание
% Проценты
em Размер шрифта элемента (например, 2,5em означает, что шрифт в 2,5 раза больше обычного шрифта)
rem Размер шрифта корневого элемента документа
ch Ширина символа «0» в монофонических шрифтах, где все символы имеют одинаковую ширину, 1 канал равен 1 символу
ex x — Высота текущего шрифта, измеренная по высоте нижнего регистра x

Содержимое файла style.

css
@charset "utf-8"
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height auto;
}
}
body {
  font-family: 'Fira Code', monospace;
}
h3 {
font-family: "Verdana"
font-size: 1.8rem;
color: blue;
}
div {
  box-sizing: border-box;
  color: black;
  margin-bottom: 4px;
  padding: 4px;
  width: 400px;
}

.percent {
  font-size: 200%;
}

.em {
  font-size: 1em;
}

.rem {
  font-size: 1rem;
}

.ch {
  font-size: 1ch;
}

.ex {
  font-size: 1ex;
}

Содержимое файла index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Относительные единицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.
 
 css">
</head>
<body>
<h3>Относительные единицы CSS</h3>
    <div>font-size: 200%</div>
    <div>font-size: 1em</div>
    <div>font-size: 1rem</div>
    <div>font-size: 1ch</div>
    <div>font-size: 1ex</div>
</body>
</html>

Открыть пример в новом окне

Подключения стилей CSS.

Различие между em и rem

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

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

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

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

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

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

Ед. изм Описание Размер
cm Сантиметры 1 cm = 1 cm
mm Миллиметры 10 mm = 1 cm
in Дюймы 1 in = 96px = 2.54 cm
px Пиксель 1 px = 1/96th of 1 in
pt Пункт 1 pt = 1/72 of 1 in
pc Пика 1pc = 12 pt

Содержимое файла style.

css
@charset "utf-8"
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height auto;
}
}
body {
  font-family: 'Fira Code', monospace;
}
h3 {
font-family: "Verdana"
font-size: 1.8rem;
color: blue;
}
.cm {
  background: purple;
  height: 1cm;
}

.mm {
  background: blue;
  height: 10mm;
}

.in {
  background: orange;
  height: 1in;
}

.pt {
  background: green;
  height: 72pt;
}

.px {
  background: deepskyblue;
  height: 96px;
}

.pc {
  background: lightcoral;
  height: 6pc;
}

Содержимое файла index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Абсолютные единицы</title>
<link rel="stylesheet" type="text/css" href="style.
 
 css">
</head>
<body>
<h3>Абсолютные единицы</h3>
    <div><strong>Cантиметры:</strong>height = 1cm (1cm = 1cm)</div>
    <div><strong>Миллиметры:</strong>height = 10mm (10mm = 1cm)</div>
    <div><strong>Дюймы:</strong>height = 1in (1in = 2.54cm)</div>
    <div><strong>Пункт:</strong>height: 72pt (72pt = 1in = 2.54cm)</div>
    <div><strong>Пиксель:</strong>height: 96px (96px = 1in = 2.54cm)</div>
    <div><strong>Пика:</strong>height: 6pc (6pc = 1in = 2.54cm)</div>
</body>
</html>

Открыть пример в новом окне

Подключения стилей CSS.

Рекомендуемые материалы:

Википедия:

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

спросил

12 лет, 9 месяцев назад

Изменено 9 месяцев назад

Просмотрено 192к раз

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

1

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

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

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

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

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

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

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

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

5

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

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

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

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

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

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

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

pt

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

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

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

пикселей

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

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

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

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

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

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

7

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

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

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

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

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

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

… и так далее.

0

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

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

Мирные дни

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

Но.

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

Итак: pt или px?

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

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

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

TL;DR

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

2

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

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

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

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

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

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

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

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

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

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

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

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

4

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

Единицы CSS

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

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

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

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

На нижний уровень, единиц состоит из –

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

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

1. Абсолютная длина

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

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

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

  • шт. – сокращение от Picas
  • в – Обозначения для дюймов
  • см – Полная форма для сантиметров
  • мм – Сокращенное обозначение миллиметров
    • 900 71 q    – Обозначает Четверть миллиметра  (Редко используется на веб-сайтах)

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

    Подписаться на @tutorial_brain

    Длина пикселя (пкс)

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

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

    96px = 1in

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

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

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

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

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

    Длина в (баллах)pt

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

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

    12pt = 1pc

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

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

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

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

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

    Длина в пиках (шт.)

    шт. означает пика  или пика.

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

    1 шт. = 12 пунктов
    6 шт. = 2,54 см
    6 шт. = 1 дюйм

    Синтаксис длины ‘ПК’:
    property_type: npc ;

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

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

    Пример длины в Pica(pc) 

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

    Длина в сантиметрах (см)

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

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

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

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

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

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

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

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

    Длина в миллиметрах (мм)

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

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

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

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

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

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

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

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

    Длина в дюймах (дюймах)

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

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

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

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

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

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

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

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

    Соотношение между дюймами, см, мм, pt, pt и px

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

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

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

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

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

    Широко используемые единицы относительной длины –

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

    Единица CSS em

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

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

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

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

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

    5 тип_свойства: aem  ;

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

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

    Пример единицы ’em’ 

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

    Предупреждение/Примечание/Информация Если вы не закодируете размер шрифта для вашего текущего элемента, то 1 см будет примерно равен 2,37 em, т. е. 1 см = 2,37 em и 1 em = 16 пикселей (по умолчанию)

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

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

    Длина CSS ex

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

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

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

    Синтаксис «ex» length:
    property_type: bex ;

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

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

    Пример длины «ex» 

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

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

    Длина в процентах (%)

    Единица % относится к окружающему родительскому элементу в процентах.

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

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

    Синтаксис длины ‘%’:
    property_type: x% ;

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

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

    Пример длины ‘%’ 

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

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

    Канал CSS Единица измерения

    Единица ch относится к ширине числа «0».

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

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

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

    Пример ‘ch’ Unit 

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

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

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

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

    CSS rem

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

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

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

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

    Синтаксис единицы «рем»:
    тип свойства: крем ;

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

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

    Пример блока «rem» 

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

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

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

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

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

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

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

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

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

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

    CSS vw length

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

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

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

    Синтаксис длины ‘vw’:
    property_type: xvw ;

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

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

    Пример длины vw 

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

    vh length

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

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

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

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

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

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

    Пример длины ‘vh’ 

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

    vmin & vmax length

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

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

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

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

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

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

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

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

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

    безразмерная длина

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

    Например:
    Если вы хотите установить отступ как 0 пикселей или 0 см и т.

    No related posts.