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

Относительные единицы измерения: Единицы измерения | htmlbook.ru

Содержание

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

Основы вёрстки контента

В прошлых уроках вы уже узнали о единицах измерения 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. Какую бы ширину вы не ставили, размер секции будет автоматически меняться. Следовательно, горизонтальная или вертикальная прокрутка никогда не появится.

Дополнительная информация

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

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

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

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

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

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

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

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

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

Использование абсолютных и относительных единиц измерения CSS

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

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

• Абсолютные значения, которые связаны с физическими величинами, такие как пики и пиксели.

• Относительные единицы, которые связаны с самим элементом или его контекстом.

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

Абсолютные единицы измерения CSS — это пиксель (px), пункт (pt), дюйм (in), сантиметр (cm), миллиметр (mm), пика (pc), четверть миллиметра (q).

Относительные единицы измерения CSS — это процент (%), em, ex, rem, ширина устройства отображения (vw), высота устройства отображения (vh), меньшее измерение устройства отображения (vmin), большее измерение устройства отображения (vmax), символ (ch).

Для дополнительной информации о менее известных единицах измерения предоставлены ссылки на уроки с детальным объяснением.

1em — это ширина буквы «m» в текущем шрифте, 1ex – высота буквы x в текущем шрифте, rem – корневой em, т. е., это ширина буквы «m» в текущем шрифте для корня документа.

Единица измерения ch, как и em, — это ширина, но символа 0 (нуль) в выбранном шрифте.

Нет смысла задавать единицу измерения, если задаваемое значение равно нулю: нуль сантиметров это то же самое, что и нуль пикселей. (Примечание редакции (переводчика Maya_Specctra или как ты посчитаешь нужным написать): Хотя вполне допустимо добавлять единицы измерения к нулевым значениям, чтобы не забыть, что именно используется, если значение придется изменить. ) Во всех остальных случаях нужно обязательно задавать единицы измерения следующим образом: 2em, 2px, и т. д.

Во всех системах измерения можно задавать значения с плавающей точкой: 2.25rem, 5.3cm, и т. д.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

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

Очень многое в CSS зависит от единиц измерения длины. Было бы нельзя задать отступы, указывать ширину элемента, если бы не было единиц измерения длины. Единицы измерения длины могут быть как положительные, так и отрицательные (не все могут быть отрицательными), а так же могут быть целыми и вещественными. Любая длина указывается не только цифрами, но и двумя буквами после них. Эти буквы означают аббревиатуру единицы измерения, которую используем. Например, есть in (дюймы), px (пиксели) и другие. Если вы указываете длину 0, то единицы измерения писать не нужно.

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

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

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

Дюймы (in) – американская мера измерения длины. Совсем не понятно, зачем эти единицы измерения в веб-разработке.
Сантиметры (cm)
Миллиметры (mm)
Пункты (pt) — эта типографическая единица измерения, чаще всего применяется для текста. 72 пункта равны одному дюйму.
Пики (pc) – тоже типографическая единица измерения, которая равна одной шестой дюйма.

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

Пример 1

div { width: 3in; } /* ширина блока 3 дюйма */
div { width: 1.5cm; } /* ширина блока 1.5 сантиметра */
div { width: 13mm; } /* ширина блока 13 миллиметров */
div { font-size: 12pt; } /* шрифт 12 пунктов */
div { font-size: 12pc; } /* шрифт 12 пик */

Между значением (цифрой) и единицами измерения нет пробела! Например, 21px — после 21 нет пробела.

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

Существует три относительных единицы измерения длины: em, ex, px. Далее подробно обо всех.

Подробно о единицах измерения em и ex

Допустим, font-size для одного из шрифтов равен 10px, то получается 1em для этого шрифта равен 10px. Давайте рассмотрим пример второй. Даны три абзаца с размером шрифта 14px. Сделаем отступ слева у первого абзац 1em, а у второго 2em и посмотрим что получилось.

Пример 2, CSS код

p { font-size: 14px; }
p.second { margin-left: 1em; }
p.third { margin-left: 2em; }

Пример 2, HTML код

<p class = "first">Абзац</p>
<p class = "second">Абзац с отступом 1em</p>
<p class = "third">Абзац с отступом 2em</p>

Подробно о единицах измерения px (пиксель)

Пиксель – это точка на экране. Пиксели практически идеальны. Если напишем font-size: 20px; то высота шрифта будет 20 пикселей (точек на экране).

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

— CSS | MDN

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

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

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

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

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

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

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

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

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

cap Это экспериментальное API, которое не должно использоваться в рабочем коде.: Представляет высоту заглавных букв в шрифте, применённом к элементу.
ch: Представляет ширину символа «0» (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.
em: Представляет подсчитанный размер шрифта элемента. Если используется в свойстве font-size, представляет унаследованный размер шрифта.
ex: Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах 1ex ≈ 0.5em.
ic Это экспериментальное API, которое не должно использоваться в рабочем коде.: Равна используемой в шрифте ширине символа «水» (ККЯ, символ «вода», U+6C34).
lh Это экспериментальное API, которое не должно использоваться в рабочем коде.: Равна рассчитанному значению свойства line-height, переведённому в абсолютные единицы измерения.
rem: Представляет размер шрифта корневого элемента (обычно <html>). Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).
rlh Это экспериментальное API, которое не должно использоваться в рабочем коде.: Равна рассчитанному значению свойства line-height корневого эдемента (обычно <html>), переведённому в абсолютные единицы измерения. Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию.

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

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

vh: Равна 1% высоты блока содержимого.
vw: Равна 1% ширины блока содержимого.
vi Это экспериментальное API, которое не должно использоваться в рабочем коде.: Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.
vb Это экспериментальное API, которое не должно использоваться в рабочем коде.: Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.
vmin: Равна vh или vw в зависимости от того, что из них меньше.
vmax: Равна vh или vw в зависимости от того, что из них больше.

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

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

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

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

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

px: Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея. 1px = 1/96 от 1in.
cm: Один сантиметр. 1cm = 96px/2.54.
mm: Один миллиметр. 1mm = 1/10 от 1cm.
Q Это экспериментальное API, которое не должно использоваться в рабочем коде.: Четверть миллиметра. 1Q = 1/40 от 1cm.
in: Один дюйм. 1in = 2.54cm = 96px.
pc: Одна пайка. 1pc = 12pt = 1/6 от 1in.
pt: Одна точка. 1pt = 1/72 от1in.
mozmm Это API не было стандартизировано., удалена в Firefox 59: Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.

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

Как уже было сказано, сами отношения не соответствуют каким-либо конкретным абсолютным уровням сигнала. Но при расчете кабельной сети необходимо учитывать именно абсолютные уровни, поэтому возникает следующий вопрос – как можно связать отношения с конкретными уровнями сигналов. Для этого необходимо иметь некоторое стандартное значение, относительно которого будет вычисляться любое отношение мощностей. Относительный уровень тогда можно будет рассчитать как отношение измеренной абсолютной мощности к этому стандартному уровню. Таким стандартным уровнем мощности является уровень 0 дБ-мВ (dBmV), который задается как 1 мВ, измеренный на сопротивлении 75 Ом.
Относительным уровнем в дБ-мВ, следовательно, является абсолютный уровень, взятый по отношению к некоторому стандартному абсолютному уровню сигнала, в качестве которого здесь принимается 1 милливольт (1мВ = 10“3 В) при сопротивлении 75 Ом. Заметим, здесь указано сопротивление, на котором измеряются абсолютные уровни (75 Ом). Это существенная ссылка, поскольку при том же напряжении 1мВ на другом сопротивлении уровень мощности будет другим – напряжение 1мВ, измеренное через любое отличное от 75 Ом сопротивление, не соответствует уровню 0 дБ-мВ. Значение сопротивления 75 Ом является стандартным для всей техники кабельного телевидения, включая выходные сопротивления приборов и характеристический импеданс (волновое сопротивление)коаксиального кабеля.
Не менее часто используются и другая единица – децибел-микровольт (дБмкВ). Определяются они полностью аналогично с той только разницей, что за стандартный абсолютный уровень в этом случае принимается 1 микровольт (1мкВ = 10“3 мВ = 10“6 В). Относительный уровень в дБмкВ (dB-pV) определяется как 1 мкВ, измеренный на сопротивлении 75 Ом.
Чтобы представлять, какому абсолютному значению мощности (в ваттах) соответствует каждая из этих двух величин, используем закон Ома. С его помощью можно вычислить абсолютный уровень мощности, соответствующий относительному уровню мощности 0 дБ-мВ и соответствующий относительному уровню мощности 0 дБмкВ. В определении децибел-милливольта было задано, что абсолютное значение напряжения составляет 0,001 В на сопротивлении 75 Ом, поэтому абсолютное значение мощности (назовем его Р0).
В определении децибел-микровольта было задано, что абсолютное значение напряжения составляет 0,001 мВ на сопротивлении 75 Ом, поэтому абсолютное значение мощности Р0 в этом случае будет равно.
Перевод величин из одних относительных единиц в другие производится с помощью простого правила, которое выводится путем несложных алгебраических преобразований с применением правил логарифмирования.

Относительные величины, их виды, единицы измерения.

Поможем написать любую работу на аналогичную тему

Получить выполненную работу или консультацию специалиста по вашему учебному проекту

Узнать стоимость

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

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

Все относительные показатели можно подразделить на следующие виды:

динамики;

плана;

реализации плана;

структуры;

координации;

интенсивности и уровня экономического развития;

сравнения.

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

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

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

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

тносительный показатель структуры (ОПС) — это соотношение структурных частей изучаемого объекта и их целого.

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

Относительный показатель интенсивности (ОПИ) характеризует степень распространения изучаемого процесса или явления в присущей ему среде:

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

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

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

Относительные показатели координации (ОПК) характеризуют соотношение отдельных частей целого между собой:

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

Внимание!

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

CSS length | TuHub

Общие сведения

Многие CSS свойства принимают значения типа <length>, например такие как font-size, margin, line-height, и т. д. Значение <length> в некоторых случаях может быть отрицательным. Некоторые свойства могут ограничивать значение до определённого диапазона. Если значение находится за пределами допустимого диапазона, то запись считается неверной и будет проигнорирована.

CSS предлагает несколько различных единиц измерения для выражения <length>. У некоторых из них есть своя история в типографии, например, пункт (point, pt) и пайка (pica, pc), а другие известны из повседневного использования, например, сантиметр (centimeter, cm) и дюйм (inch, in). Есть также единица, которая была придумана специально для CSS: это пиксель (pixel, px).

CSS также определяет набор и других единиц для измерения <length>, которые вместе с вышеупомянутыми делятся на две категории: абсолютные единицы измерения и относительные единицы измерения.

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

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

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

px

Несмотря на то что это абсолютная единица измерения, px не определяется как постоянное значение, он определяется относительно устройства на котором просматривается элемент (печатная версия или экран устройства). Они определены как абсолютные в CSS 2.1, но описываются относительным образом, так как устройство может отобразить px любого размера относительно пикселя для получения правильного PPI и расстояния просмотра для конкретного устройства.

Для типичных дисплеев, 1 px в CSS равен 1 пикселю на дисплее, то есть 1 точке на экране.

mm

Один миллиметр.

cm

Один сантиметр. 1cm = 10mm = 37.8px.

in

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

pt

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

pc

Одна пайка. Равна 12 пунктам.

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

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

em

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

1em равен значению свойства font-size элемента на котором используется единица измерения. Если размер шрифта изменяется, то и 1em будет менять своё значение в соответствии с размером шрифта.

Например, правило:

h2 { line-height: 1.4em; }

означает, что высота строки элементов h2 будет на 40% больше чем размер шрифта элементов h2. С другой стороны:

h2 { font-size: 1.4em; }

означает, что размер шрифта элементов h2 будет на 40% больше чем наследуемый размер шрифта элементами h2.

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

ex

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

В следующем примере, высота строки текста устанавливается в значение 300% от высоты символа x используемого шрифта.

p {
  font-family: "Roboto", sans-serif;
  line-height: 3ex;
}

ch

Единица измерения ch основана на ширине символа 0 (ноль) используемого шрифта.

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

.container {
  margin: 20ch;
}

rem

Относительная единица измерения rem указывает размер относительно размера шрифта корневого элемента (html элемента). Когда свойство font-size указано у самого корневого элемента, rem ссылается на начальное значение свойства.

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

В следующем примере, размер шрифта всех элементов h2 устанавливается в значение на 250% превышающее размер шрифта корневого элемента. Размер шрифта корневого элемента установлен в 100%, а это означает что он получит размер по умолчанию установленный в браузере, обычно это 16px.

html {
  font-size: 100%; /* по умолчанию начальное значение размера шрифта */
}

h2 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

Процентные единицы измерения (от области просмотра)

vh

Единица измерения vh равна 1/100 от высоты области просмотра. Это тоже самое если мы скажем, что 1vh равен 1% от высоты области просмотра.

Например, следующее правило установит размер шрифта у элементов h2 в 150% от размера шрифта элемента в котором он находится:

h2 {
  font-size: 150%;
}

А следующее правило установит размер шрифта у элементов h2 в 10% от высоты области просмотра. То есть если высота области просмотра равна 200 миллиметров, например, то размер шрифта будет установлен в (10 * 200) / 100 = 20 миллиметров.

h2 {
  font-size: 10vh;
}

vw

Единица измерения vw равна 1/100 от ширины области просмотра. Это тоже самое если мы скажем, что 1vw равен 1% от ширины области просмотра. Это тоже самое что и единица измерения vh (см. выше), но основывается на ширине области просмотра вместо высоты.

h2 {
    font-size: 150%;
}

А следующее правило установит размер шрифта у элементов h2 в 8% от ширины области просмотра. То есть если ширина области просмотра равна 200 миллиметров, например, то размер шрифта будет установлен в (8 * 200) / 100 = 16 миллиметров.

h2 {
    font-size: 8vw;
}

vmin

Значение единицы измерения vmin равно минимальному значению из vh и vw. То есть, она принимает значение того чьё значение меньше. Таким образом 1vmin равен 1% от наименьшей стороны области просмотра.

Например, следующее правило установит размер шрифта у элементов h2 в 10% от размера наименьшей стороны области просмотра:

h2 {
  font-size: 10vmin;
}

vmax

Значение единицы измерения vmax равно максимальному значению из vh и vw. То есть, она принимает значение того чьё значение больше. Таким образом 1vmin равен 1% от наибольшей стороны области просмотра.

Например, следующее правило установит размер шрифта у элементов h2 в 10% от размера наибольшей стороны области просмотра:

h2 {
  font-size: 10vmax;
}

Поддержка браузерами

Тип данных <length> поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE, и на Android и на iOS.

Единицы измерения ch и rem поддерживаются в IE начиная с 9 версии.

Единица измерения ch не поддерживается WebKit браузерами.

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

Viewport units: vw, vh, vmin, vmax

Пример

единиц CSS

Единицы CSS

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

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

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

Пример

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

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

p {
font-size: 25px;
высота строки: 50 пикселей;
}

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

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

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

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

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

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

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

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

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

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

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

Установка	Описание
выс.	Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта)	Попробовать
пр.	Относительно высоты текущего шрифта по оси x (используется редко)	Попробовать
шасси	Относительно ширины «0» (нуля)	Попробовать
rem	Относительно размера шрифта корневого элемента	Попробовать
VW	Относительно 1% ширины области просмотра *	Попробовать
vh	Относительно 1% высоты области просмотра *	Попробовать
vmin	Относительно 1% меньшего размера области просмотра *	Попробовать
vmax	Относительно 1% большего размера области просмотра *	Попробовать
%	Относительно родительского элемента	Попробовать

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

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую единица длины.

Блок длины
em, ex,%, px, cm, mm, in, pt, pc	1,0	3,0	1.0	1,0	3,5
шасси	27,0	9,0	1,0	7,0	20,0
rem	4,0	9,0	3,6	4,1	11,6
vh, vw	20,0	9.0	19,0	6,0	20,0
vmin	20,0	12,0	19,0	6,0	20,0
vmax	26,0	16,0	19,0	7,0	20,0

Руководство по единицам CSS для относительного интервала

Пространство относительно документа

: корень

Использование : rem

Если вы не измените его, значение по умолчанию rem равно 16px с преимуществом реагирования на изменения уровня масштабирования.

Зачем и как использовать

rem

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

Это также предпочтительный метод измерения размера шрифта.

Пространство относительно области просмотра

Использовать : единицы просмотра

Область просмотра — это граница окна браузера или размера экрана устройства.

Доступные единицы просмотра

vh : высота области просмотра — в зависимости от высоты области просмотра
vw : ширина области просмотра — в зависимости от ширины области просмотра
vmin : минимум области просмотра — возвращает меньшее значение vh или vw , обновляется быстро
vmax : максимум области просмотра — возвращает большее значение vh или vw , обновляется быстро

Блоки Viewport идеально подходят для:

удержание элемента в пределах видимой области
, гарантируя, что ,
или заставка имеет минимальную высоту, равную высоте области просмотра ( min-height: 100vh )
создание пропорциональных, отзывчивых элементов
в сочетании с calc , чтобы повлиять на видимость нескольких элементов
создание слайд-шоу в полную высоту и ширину (особенно в сочетании с scroll-snap )

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

Пространство относительно элемента

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

em останется пропорциональным правилу для элемента или ближайшего предка font-size .Один em равен размеру шрифта, поэтому по умолчанию он равен 1rem , который по умолчанию равен 16px .

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

Когда и как использовать

em

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

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

Интервал относительно содержимого

Использование : канал , мм

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

Когда и как использовать

ch

Используется для установки ширины на основе оптимальной длины строки (50-80 символов в зависимости от используемого ресурса). Начните с 80ch и оптимизируйте по мере необходимости в зависимости от используемого шрифта, помня, что большинство шрифтов имеют узкий 0 , поэтому ch , вероятно, будет больше, чем желаемая длина строки.

Это отлично подходит для:

артикул содержание
установка значения flex-base , особенно для техники альбатроса flexbox
установка максимальной части minmax для столбцов сетки
, обеспечивающий минимальную ширину на кнопках или элементах навигации

Длина CSS | CSS-уловки

В CSS есть несколько свойств, которые принимают длину в качестве значения.Свойства блочной модели очевидны: ширина, высота, поля, отступы, граница. Но есть и другие: смещение и размер тени блока или размер и интервал шрифтов. Каковы все допустимые свойства «длины» в CSS? Их довольно много.

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

пикселей

  .wrap {
  ширина: 400 пикселей;
}

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

Nerdy биты о том, что пиксели в CSS

пикселей в CSS закреплены на CSS опорного пикселя, который является визуально угол одного пикселя, 0,0213 градуса или 1,278 угловых минут. Это основано на устройстве с плотностью пикселей 96 точек на дюйм и расстоянием от считывающего устройства до 28 дюймов. Таким образом, производители устройств могут использовать опорный пиксель для установки размера на основе предполагаемого / ожидаемого визуального расстояния.

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

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

в

  .wrap {
  ширина: 4 дюйма;
}

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

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

см

  .wrap {
  ширина: 20см;
}

Для большей части мира сантиметры более привычны и полезны в качестве физического измерения. Они также просто отображаются в пиксели:

  1 см == 37,8 пикселей

мм

 .сворачивать {
  ширина: 200мм;
}

И на порядок меньше…

  1 мм == 0,1 см == 3,78 пикселей

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

Em

  .wrap {
  ширина: 40em;
}

Относительная единица. Первоначально типографское измерение основывалось на заглавной букве «M» текущего шрифта. Хотя длина шрифта не изменяется при изменении семейства шрифтов , значение изменяется при изменении размера шрифта .

Без CSS 1em будет:

  1em == 16px == 0,17 дюйма == 12pt == 1pc == 4,2 мм == 0,42 см

Если какой-либо CSS изменяет размер шрифта (на любом уровне документа), 1em становится тем же, что и новый font-size .

Делая вещи немного более забавными, единицы em умножаются сами на себя при применении к font-size , поэтому, если элемент с размером шрифта 1.1em находится внутри элемента с размером шрифта 1.1em внутри еще одного элемента с размером шрифта 1.1em, результирующий размер будет 1.1 ✕ 1.1 ✕ 1.1 == 1.331rem (корень em). Это означает, что даже если для элемента установлено значение, скажем, 10em, это не означает, что он будет иметь одинаковую ширину везде, где он появляется. Он может быть шире или уже, если размер шрифта изменится (см. Доказательство).

Рем

  .wrap {
  ширина: 40 бэр;
}

Относительная единица измерения, такая как em, но всегда относительно «корневого» элемента (например, : root {} ), а не с использованием каскада, как em .Это значительно упрощает работу с относительными единицами измерения.

Существенные проблемы с поддержкой браузера: не работает в IE 8, Safari 4 или iOS 3.2.

Очки

  .wrap {
  ширина: 120pt;
}

Точка — это физическое измерение, равное 1/72 дюйма. Точки — это наиболее распространенный способ изменения размера шрифта за пределами CSS (вероятно, почему он поддерживается в CSS). Это все еще распространено в языке «Конечно, они записывают эту важную информацию крошечным шрифтом из восьми пунктов!» .

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

Существенные проблемы с поддержкой браузеров: Раньше были большие различия в отображении на экране размера pt. Вот сравнение IE 6 и Firefox (вероятно, 3.6).

Пика

  .wrap {
  ширина: 12шт;
}

Та же история, что и очки, только 1шт == 12pt.

из

  .wrap {
  ширина: 60ex;
}

Это измерение, основанное на высоте текущего шрифта по оси x. Иногда это исходит из информации, встроенной в сам шрифт, иногда браузеры определяют это, измеряя глиф в нижнем регистре, а в худшем случае он устанавливается на 0,5em. Он назван высотой «x», потому что он предположительно основан на высоте символа x. Чтобы понять высоту x, представьте строчный символ, который выступает вверх (восходящий элемент), как строчная буква «d».Высота по оси x не включает этот восходящий элемент, это высота нижней части цикла этого символа.

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

шасси

  .wrap {
  ширина: 60ч;
}

По духу это похоже на x-height, только ch основывается на ширине символа нуля (0), а не на высоте символа x.Он также меняется при изменении семейства шрифтов.

Процентная длина области просмотра

Настольный компьютер

Chrome	Firefox	IE	Edge	Safari
26	19	11	16	6,1

900 мобильный / планшет

9049 Android Chrome Android Firefox Android iOS Safari 88 85 4.4 8
VW
.wrap { ширина: 10vw; }
Это единица измерения «ширины окна просмотра». 1vw равно 1% ширины области просмотра. Он аналогичен процентному соотношению, за исключением того, что значение остается неизменным для всех элементов, независимо от их родительских элементов или ширины родительских элементов. Немного похоже на то, как единицы rem всегда относятся к корню.
Тип калибровки является здесь основным вариантом использования. См. Типографику с размером окна просмотра.
Существенные проблемы с поддержкой браузера: Нет поддержки ни в одном мобильном браузере, кроме самой последней версии iOS 6. Это касается всех единиц длины, связанных с окном просмотра.
vh
.wrap { ширина: 10вх; }
Это то же самое, что и vw (ширина окна просмотра), только вместо этого он основан на высоте окна просмотра.
vmin
.wrap { ширина: 20вмин; }
Это значение будет в зависимости от того, какое из меньше на данный момент, vw или vh .В стандартном варианте использования типа определения размера это может быть более полезная метрика, чем vw или vh отдельно для определения истинного размера экрана.
vmax
.wrap { ширина: 20vmax; }
Это значение будет в зависимости от того, какое из больше на данный момент, vw или vh .
Существенные проблемы с поддержкой браузеров: браузеры на основе WebKit поддерживают vmin, но не поддерживают vmax (пока). Однако Firefox поддерживает vmax.
Нечетный мяч
В процентах
.wrap { ширина: 50%; }
Длина, заданная в процентах, основана на длине того же свойства родительского элемента. Например, если элемент отображается с шириной 450 пикселей, дочерний элемент с шириной, установленной на 50%, будет отображаться с размером 225 пикселей ¹.
Общая информация: процентов технически не является единицей длины, но я включаю их здесь, поскольку они связаны между собой.
Дополнительная информация
Что поддерживает ваш браузер?
См. Здесь:
Оцените эту ручку!
¹ Предположим, что дочерний элемент не является встроенным или не является ячейкой таблицы с какими-то странными табличными вещами, гибким дочерним элементом или ячейкой сетки или любыми другими причудливыми причудами.
rem против em единиц в CSS
Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.
Введение
У нас есть много хороших вариантов, когда дело доходит до единиц в CSS.В современном мире адаптивного дизайна относительные единицы, такие как em или rem, дают нам возможность адаптации и гибкости прямо из коробки, что позволяет определять размеры на основе размеров шрифта, определенных выше в разметке.
Вы, наверное, уже какое-то время используете единицы em и rem, но вы, возможно, задаетесь вопросом о точной разнице между ними и о том, какая единица лучше подходит для ваших вариантов использования. Давайте разберемся как можно короче.
Резюме: единиц em для свойства font-size будут относиться к font-size родительского элемента.Единицы em для других свойств, кроме font-size, будут относиться к font-size текущего элемента. Размеры единиц rem всегда будут относиться к размеру шрифта корневого элемента html .
em Установка
em заимствовано из мира типографики, и это единица, которая позволяет установить размер шрифта элемента относительно размера шрифта его родительского элемента.
Рассмотрим простой пример:
.parent { размер шрифта: 18 пикселей; } .ребенок { размер шрифта: 1.5em; }
В этом примере дочерний элемент будет иметь размер шрифта 27 пикселей (1,5 * 18 пикселей = 27 пикселей).
Если в родительском элементе не указано значение font-size, значение будет искать выше в дереве DOM. Если размер шрифта не указан до самого корневого элемента ( ), то используется значение браузера по умолчанию 16px .
Довольно просто и понятно, правда? Однако единицы em могут использоваться не только для установки размера шрифта, и их можно использовать практически везде, где ожидаются единицы измерения (отступы, поля, ширина, высота, максимальная ширина, … вы понимаете!) Когда единицы em используются в свойствах, отличных от font-size, значение определяется относительно собственного font-size элемента.
Добавим к нашему примеру:
.parent { размер шрифта: 18 пикселей; } .ребенок { размер шрифта: 1.5em; отступ: 2em 1em; }
Отступ сверху и снизу на .child будет 54px . Это в 2 раза больше font-size размера шрифта нашего текущего элемента ( 2 * 27px )
Отступ слева и справа на .child будет иметь размер 27px . Это в 1 раз больше размера шрифта нашего элемента.
Помните: когда единицы em используются для font-size, размер зависит от font-size родительского элемента.При использовании в других свойствах он зависит от размера шрифта самого элемента.
Эффект смешивания: Проблема в раю
Пока все хорошо с использованием модуля em, но проблема может возникнуть из-за того, что модуль может соединяться от одного уровня к другому.
Давайте сохраним аналогичный базовый пример:
.parent { размер шрифта: 15 пикселей; } .ребенок { размер шрифта: 2em; }
Но давайте использовать его в нашей разметке вот так:
Я 15px Я 30 пикселей, как и ожидалось Мне 60px, начинаются неприятности! Я 120 пикселей, теперь у нас действительно проблемы!
У меня 15 пикселей, я 30 пикселей, как и ожидалось, 60 пикселей, начинаются проблемы! У меня 120 пикселей, теперь у нас действительно проблемы! Итак, как вы можете видеть, эффект единиц em может усугубляться, когда несколько элементов размера em-font находятся внутри друг друга.Это может стать проблемой и привести к непредвиденным последствиям в ваших проектах. Эта проблема является причиной создания модуля rem. rem Единица Единица rem, сокращенно от root em, является относительной единицей, которая всегда будет основываться на значении font-size для корневого элемента, которым является элемент . И если элемент не имеет указанного размера шрифта, используется значение браузера по умолчанию 16px . Это означает, что при использовании единицы rem игнорируются значения родительских элементов и учитывается только значение корня. С аналогичным примером, но в rem: .html { размер шрифта: 16 пикселей; } .parent { размер шрифта: 15 пикселей; } .child-rem { размер шрифта: 2rem; } Я 15px Я 32px, как и ожидалось У меня 32 пикселя, ага! Я 32px, как по маслу! Я 15px У меня 32 пикселя, как и ожидалось У меня 32 пикселя, ага! У меня 32 пикселя, как по маслу! Как видите, использование единиц rem позволяет избежать эффекта сложения единиц em.С rem все всегда и последовательно основывается на размере шрифта или корневом элементе, поэтому нет никаких сюрпризов. То же самое относится и к другим значениям, кроме font-size (margin, padding,…). Использование единиц rem для них по-прежнему будет относиться к размеру шрифта корневого элемента. em vs rem, что лучше? На самом деле лучшего устройства нет, и все зависит от ваших личных предпочтений. Некоторым людям нравится разрабатывать все в единицах rem для согласованности и предсказуемости, в то время как другим нравится также использовать единицы em там, где влияние соседних родительских элементов имеет смысл. 15 CSS Относительные единицы, сколько вы знаете? em, rem, ex, cap, ch, ic и др .. | автор: Vishwas Chouhan Если вы читаете это, я уверен, что вы знаете как минимум 5 способов центрирования HTML-элементов с помощью CSS. Итак, 15 вариантов относительного размера не должны вас удивлять. Скажу вам, некоторые из них очень странные. Я видел этот твит учителя JavaScript, я знал только 5–7 из этих свойств, и это вызвало у меня массовую атаку FOMO. Итак, я решил написать эту статью и избавить вас от FOMO. Вы когда-нибудь задумывались, что ни один из ваших экранов не имеет таких же размеров и размеров? Но все они отображают веб-страницы. Таким образом, веб-страницы должны быть стилизованы таким образом, чтобы соответствовать пропорциям относительно для отображения (или любого другого элемента HTML). Короче говоря, сделать такие отзывчивые, адаптивные макеты изящно возможными. См. Этот крутой GIF от Karol Podleśny https://dribbble.com/shots/1277779 1. the unpredicatble em Относительно размера шрифта текущего элемента ( 2em означает удвоение текущего размера шрифта ). Свойство длины, зависящее от размера шрифта, да как волшебно. .post { font-size: 24px; граница слева: 0,25 мкм, сплошной # 4a90e2; } / * Граница-левая-ширина будет равна 6 пикселям. * / Работа с em может быть сложной, поскольку он получает значение относительно своего родительского элемента. В случае вложенных элементов это становится беспорядочным, когда родительский элемент также имеет значение em . 2. rem (root em) То же, что em , но относительно размера шрифта корневого элемента документа . p { левое поле: 1 бэр; } h5 { font-size: 2rem; } / * В отличие от em , который может быть разным для каждого элемента, rem постоянен во всем документе * / Для этого метода очень важно установить базовый размер шрифта, обычно по умолчанию в браузере это 16 пикселей. 3,4. vh и vw В отличие от em и rem , которые зависят от размера шрифта, vh и vw зависят от размера области просмотра. 1vh = 1% или 1/100 высоты окна просмотра 1vw = 1% или 1/100 ширины окна просмотра Возможно, вы видели некоторые сайты с типографикой, которая прекрасно масштабируется при изменении размера окна браузера, vw и vh делают это возможным. 5,6. vmax и vmin Макс. и мин. области просмотра: 1vw или 1vh, в зависимости от того, что больше или меньше соответственно. 1vmax = 1% или 1/100 большего значения между 1vw или 1vh 1vmin = 1% или 1/100 от меньшее значение между 1vw или 1vh 7.% Довольно популярно, всем друг и довольно очевидно % относится к своему родительскому элементу. .сообщение { font-size: 24px; } .post-category { font-size: 85%; } .post-title { размер шрифта: 135%; } / * Дочерние элементы с размером шрифта% ... 85% 0,85 * 24 = 20,4 пикселя 135% 1,35 * 24 = 32,4 пикселя * / Относительные единицы CSS Модули в CSS критически важны, поскольку мы работаем с ними все время. Вы не можете ничего построить, не используя их, поэтому мы должны хорошо знать единицы измерения. Все мы хорошо знаем нашу любимую единицу — пиксель.Пиксель — это физическая точка на экране вашего монитора, размер которой всегда одинаков (на этом мониторе могут быть экраны с высокой плотностью пикселей, но это другая история). Строить с помощью пикселей не так уж сложно; вы получаете дизайн, измеряете его части и используете те же ширину, высоту и размер шрифта. Это то, что мы называем безупречным дизайном. Это было круто — , но не для меня — когда-то (когда мы просматривали Интернет на экране с разрешением 1024 или 1280 пикселей), но в настоящее время это совершенство ничего не значит. С появлением адаптивного дизайна нам пришлось поддерживать намного больше устройств с разными параметрами, поэтому нам потребовались более гибкие единицы, называемые относительными единицами. Относительная единица зависит от ее контекста и других внешних факторов (отдельное свойство), поэтому с ней труднее работать. Конечно, есть более простые единицы, такие как процент, который знаком многим, но есть более сложные единицы, такие как em, которые во многих случаях кажутся непредсказуемыми из-за наследования.Но не бойтесь, для всего есть решение. Основным преимуществом относительных единиц является то, что вы можете создать свой сайт или приложение для всех, а также можете эффективно управлять им. Если вам нужно следовать дизайну, вы также можете преобразовать свои значения исправлений в относительные. Так что это? Единицы Em и Rem Одно можно сказать наверняка, если вы пойдете с em и rem, вы никогда не оглянетесь назад. Эти два фактора дают вам и вашей системе дизайна такую гибкость, которая сделает вашу повседневную дизайнерскую жизнь более расслабленной. Прежде всего, давайте посмотрим на определения: em: относительно размера шрифта элемента, один em означает размер шрифта текущего элемента, rem: относительно размера шрифта корневого элемента, один rem означает размер шрифта корневого элемента. Как я сказал ранее, работать с em довольно сложно, потому что он может получить свое значение относительно своего родительского элемента, поэтому в случае вложенности это непрактично (если родительский элемент тоже имеет значение em), но именно здесь появился rem, в котором отражает только размер корневого шрифта. Используя эти два модуля, мы можем создавать гибкие, отзывчивые компоненты, такие как следующая кнопка: См. Pen Using em and rem в CSS от Адама Лаки (@adamlaki) на CodePen. Как вы видите, мы используем em в качестве заполнения единицы длины и масштабируем все это глобально с помощью селектора: root и локально также с помощью em (малый и большой вариант). Определите размер шрифта rem, чтобы избежать проблемы вложенности em. Следуя этому методу, вы можете оптимизировать свой вертикальный поток. Для этого метода очень важно установить базовый размер шрифта (по умолчанию браузер обычно составляет 16 пикселей), потому что вы можете рассчитать значения пикселей следующим образом: 16 (базовый размер шрифта) / 12 (текущий размер шрифта) = 1.3333 см. Приятно знать, что вы можете использовать em везде в своем дизайне (где приемлемо значение длины), но для меня — и другие — не лучший вариант. Я не использую его в медиа-запросах, потому что считаю, что в этом случае лучше использовать абсолютные значения. Обратите внимание, что это только введение. Пожалуйста, поищите дополнительную информацию в Интернете или прочтите книгу «CSS in Depth» (кстати, это отличная книга). Другие шрифты: ex, ch Эти два, как и предыдущие, связаны и относятся к текстовым значениям, поэтому вы можете достичь аналогичных решений. Единица ex относится к высоте x шрифта , в основном к высоте буквы x. Единица ch означает ширину нулевого символа в шрифте. Для получения дополнительной информации ознакомьтесь со статьей Эрика Мейера. Процентная единица Использование процентов в качестве относительных значений популярно во многих фреймворках CSS для разделов макета. Bootstrap 3 также использует процент для определения своих столбцов. Относительно родительского элемента или ширины области просмотра.Для нашего здравого смысла мы должны использовать это в основном для верстки. Если мы объявляем контейнер шириной 80%, и вы создаете элемент столбца с 50%, 50% вашего столбца будет половиной 80% родительского. Вы можете проверить это на панели вычисляемых свойств вашего браузера. См. Относительное значение пера в CSS от Адама Лаки (@adamlaki) на CodePen. Единицы измерения ширины и высоты видового экрана Единицы vw и vh всегда относятся к области просмотра. 1vw и 1vh — это 1/100 ширины и высоты вашего окна просмотра.Вы можете изменить размер своих элементов так, чтобы они заполняли область просмотра по вертикали, или вы можете создать действительно адаптивную типографику, как в этой отличной статье! Как и в случае с rem, эти единицы никогда не изменяют контекст, они всегда относятся к размерам прокручиваемой пользовательской области вашего браузера (также известной как ваше окно просмотра). Связанные Нужен веб-разработчик? Может быть, мы сможем помочь, свяжитесь с нами! Относительный размер с помощью модулей EM — Учебное пособие Чувствительные модули, такие как модули EM, очень мощные, и в этом руководстве вы узнаете, как использовать эти возможности для повышения устойчивости внешнего интерфейса Комбинация адаптивного дизайна и другие системы, основанные на компонентах, означают, что когда мы пишем CSS для элемента, есть большая вероятность, что мы совершенно не знаем, где он будет использоваться.Из-за этого мне нравится позволять внешнему контексту контролировать размер и цвет шрифта, а все остальное делать каскаду. Этот подход абсолютно хорош, но он может создать некоторые проблемы, если вы используете фиксированные размеры элементов, потому что масштабирование текста очень быстро нарушит пропорции этих фиксированных элементов. Относительный размер помогает в этой ситуации, и я предпочитаю позволить font-size делать всю работу за меня. Используя em единиц для изменения размера элементов, которые ранее имели бы размер пикселей , мы можем позволить вещам масштабироваться, сохраняя при этом разумный масштаб размера шрифта его родительского элемента .У нас также есть возможность использовать блоки em для ширины и высоты с этой стратегией. Я привел три примера контекстов, которые, на мой взгляд, являются идеальными кандидатами для этого подхода. SVG Иконки Я недавно опубликовал этот совет, и он взорвал умы людей. Давайте углубимся в это немного глубже. Первый шаг - установить ваши SVG-иконки css следующим образом: .значок { ширина: 1em; высота: 1em; } При этом их ширина и высота будут ровно 100% от размера шрифта их родителя . Вы даже можете пропустить класс CSS и вместо этого установить размеры с помощью атрибутов : Этот подход особенно полезен, когда ваш значок SVG находится внутри ссылки или кнопки, и, как показано в примере: если он находится в большом контексте, он будет масштабироваться с идеальной пропорцией. Изображения Круглые аватары пользователей - очень распространенный шаблон дизайна, и они работают очень хорошо, если они соотносятся с размером шрифта их родственных элементов. В этом примере размер шрифта установлен для родительского компонента .profile . В элементах .profile__image и .profile__heading для определения размера используются единицы em . Это замечательно, потому что, когда мы добавляем модификатор .profile - large , который устанавливает размер шрифта компонента на 5rem , оба этих элемента масштабируются и сохраняют свой относительный размер в компоненте. Код в статьях Как и на этом сайте, размер элементов с em единиц очень удобен. Основная причина, по которой это удобно, заключается в том, что элементы выглядят немного маленькими, особенно если вы используете шрифты с засечками, такие как Georgia. Из-за этого я увеличил размер шрифта элемента до примерно 1,2em . Тогда это будет хорошо масштабироваться, если будет или даже ! Это быстрый прием, который можно добавить к поясу с инструментами. No related posts.