7.8 KiB
title | localeTitle |
---|---|
Units | Единицы измерения |
Единицы измерения
Многие свойства CSS, такие как width
, margin
, padding
, font-size
и т.д., определяют размеры. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, 5px
, 0.9em
и т. Д.
Длина
Единицы общей длины
Для выражения длины используется CSS. Более старыми, поддерживаемыми всеми браузерами, являются:
- rem - «r» означает «root»: «root em» -, который равен размеру шрифта, закрепленному на корневом элементе (почти всегда
<html>
). - vh и vw - Многие техники отзывчивого веб-дизайна в значительной степени зависят от процентных правил. Тем не менее, процентные меры CSS не всегда являются лучшим решением для всех проблем. Мера vh равна 1/100 высоты окна просмотра. Так, например, если высота браузера равна 800px, 1vh равно 8px, и, аналогично, если ширина окна просмотра равна 650px, то 1vw эквивалентно 6.5px.
- vmin и vmax. Эти единицы связаны с максимальным или минимальным значением vh и vw . Например, если браузер был установлен на 1200px в ширину, а высота 600px, 1vmin будет 6px и 1vmax будет 12px. Однако, если ширина была установлена равной 700px, а высота установлена равной 1080px, vmin будет равен 7px и vmax 10.8px.
- ex и ch - эти единицы, аналогичные em и rem , полагаются на текущий шрифт и размер шрифта. Однако, в отличие от em и rem , эти единицы также полагаются на
font-family
поскольку они определяются на основе мер, специфичных для каждого шрифта. Блок ch («единица символа») определяется как ширина нулевого символа («0»). Единица ex определяется как «текущая x-высота текущего шрифта или половина 1em». Высота-x данного шрифта - это высота строчного «x» этого шрифта. Это часто средняя отметка шрифта.
Unit | Description |
---|---|
em | 1 em - вычисленное значение размера шрифта для элемента, на котором он используется. |
ex | 1 ex - текущая высота x шрифта. Обычно x-height (но не всегда, например, если в шрифте нет «x»), равном высоте строчки «x» |
ch | 1 ch - это ширина глифа «0» (нуль) в текущем шрифте. «ch» означает знак (character). |
rem | 1 rem - вычисленное значение свойства font-size для корневого элемента документа. |
vw | 1vw составляет 1% от ширины окна просмотра. «vw» означает «ширина окна просмотра». |
vh | 1vh - 1% высоты окна просмотра. «vh» означает «высота окна просмотра». |
vmin | равняется меньшему из «vw» или «vh» |
vmax | равняется большему из «vw» или «vh» |
Существует два общих типа единиц, используемых для длины и размера в CSS: относительный и абсолютный.
Относительные единицы
em
- Ширина заглавной буквы M
font-size
текущего элемента. - Размер шрифта наследуется от родительских элементов.
- Пример:
Здесьdiv { font-size: 16px; } div h3 { font-size: 2rem; }
<h3>
будет равняться32px
так какfont-size
текущего или родительского элемента равен16px
.- Ширина заглавной буквы M
rem
em
корневого элемента или ширина прописной буквы M базовогоfont-size
по умолчанию.- Размер шрифта родителя не будет иметь эффекта.
- Пример:
Здесьbody { font-size: 16px; } p { font-size: 1.5rem; }
<p>
будет равняться24px
так как основнойfont-size
по умолчанию -16px
.%
- размер в процентах относительно размера родителя.
- Пример:
Поскольку ширина родителя составляетdiv { width: 400px; } div p { width: 75%; }
400px
, ширина внутреннего картографа будет300px
или 75% от400px
.vw/vh
- ширина/высота экрана просмотра
- Пример:
body { width: 100vw; }
body
заполняет всю ширину окна просмотра, будь то 417px, 690px или любое дрегое значение.
Абсолютные единицы
Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Вот некоторые абсолютные единицы:
px
- пиксель
- количество пикселей зависит от качества экрана устройства просмотра
in
,cm
,mm
- дюйм, сантиметр, мм
- Дюйм остается дюймом на экране любого размера.
pt
,pc
- точки (1/72 дюйма) и пики (12 точек) Пример
p {
font-size: 24px;
}
div {
width: 3in;
border-width: 3pt;
}
Абзац с font-size: 24px
будет отображаться как 24px на экране телефона, планшета или рабочего стола.
div
будет отображаться как 3 дюйма в ширину, а border
на div
будет иметь толщину 3/72 дюйма, независимо от размера экрана.