CSS: max-width с разными единицами измерения

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

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

ch ширина символа «0»

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

<style>.mw-ch {
  max-width: 25ch;
}</style>

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

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

<style>.mw-em {
  max-width: 20em;
}</style>

ex обычно высота буквы x, x-height.

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

<style>.mw-ex {
  max-width: 25ex;
}</style>

rem размер шрифта корневого элемента.

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

<style>.mw-rem {
  max-width: 20rem;
}</style>

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

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

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

<style>.mw-vh {
  max-width: 25vh;
}</style>

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

Равна 1% ширины блока содержимого, то есть видимой части документа.

<style>.mw-vw {
  max-width: 25vw;
}</style>

vmin меньшее среди vh и vw.

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

<style>.mw-vmin {
  max-width: 25vmin;
}</style>

vmax большее среди vh и vw.

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

<style>.mw-vmax {
  max-width: 25vmax;
}</style>

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

px пиксель.

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

<style>.mw-px {
  max-width: 250px;
}</style>

cm сантиметр.

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

<style>.mw-cm {
  max-width: 5cm;
}</style>

mm миллиметр.

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

<style>.mw-mm {
  max-width: 50mm;
}</style>

in дюйм.

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

<style>.mw-in {
  max-width: 2in;
}</style>

pc пайка.

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

<style>.mw-pc {
  max-width: 12pc;
}</style>

pt точка.

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

<style>.mw-pt {
  max-width: 200pt;
}</style>