Загрузка...Примеры применения различных 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>