Каждый начинающий веб-разработчик сталкивается с потребностью понимать, как задавать размеры и расположение элементов на странице. В мире CSS для этого существует множество единиц измерения. Но как выбрать правильную? В этой статье мы рассмотрим основные единицы измерения и научимся их применять.
Абсолютные единицы измерения
- px (пиксели):
- Определение: Пиксель — это основная единица изображения на экране.
- Примеры:
font-size: 16px;,width: 300px; - Когда использовать: Если нужна точность и стабильность в отображении.
- pt (пункты):
- Определение: Пункт — типографская единица, часто используемая при печати.
- Примеры:
font-size: 12pt; - Преобразование: 1 inch = 72 pt.
- pc (пика):
- Определение: 1 пика = 12 пунктов.
- Примеры:
margin: 1pc;
- in, cm, mm:
- Определение: Дюймы, сантиметры и миллиметры.
- Примеры:
width: 2in;,margin: 50mm; - Соотношение: 1in = 2.54cm = 25.4mm.
Относительные единицы измерения
- em:
- Определение: Относительная единица, равная текущему размеру шрифта.
- Примеры:
font-size: 2em;(если базовый размер шрифта 16px, то это будет 32px). - Как вычисляется: Берется текущий размер шрифта и умножается на значение em.
- rem:
- Определение: Единица, равная размеру шрифта корневого элемента (обычно
<html>). - Примеры:
font-size: 1.5rem;(если базовый размер шрифта корневого элемента 16px, это будет 24px).
- Определение: Единица, равная размеру шрифта корневого элемента (обычно
- % (проценты):
- Определение: Процентное значение, относительное к родительскому элементу.
- Примеры:
width: 50%;— элемент будет занимать 50% ширины своего родителя.
- vw, vh, vmin, vmax:
- Определение: Единицы, основанные на размерах вьюпорта.
- Примеры:
font-size: 4vw;— размер шрифта будет равен 4% ширины вьюпорта.
Динамические единицы измерения
- ex и ch:
- Определение: Основаны на метриках текущего шрифта.
- Примеры:
width: 20ch;— ширина элемента, равная ширине 20 символов «0».
Преимущества и недостатки различных единиц измерения
Выбор единицы зависит от задачи. Пиксели идеальны для точности, проценты и em/rem удобны для адаптивности.
Инструменты и ресурсы
- Онлайн-конвертеры: помогут быстро перевести одни единицы в другие.
- Гайды и обучающие материалы: ищите качественные ресурсы для глубокого погружения в тему.
Заключение по единицам измерения
Понимание единиц измерения в CSS — ключевой навык для веб-разработчика. Надеемся, что после прочтения этой статьи вы чувствуете себя увереннее в выборе подходящей единицы для вашего следующего проекта.
Таблица соответствия единиц измерения
Таблица соответствия представляет собой таблицу, в которой сопоставляются разные единицы измерения, их основное применение, а также примерные эквиваленты (если это применимо).
| Единица | Описание | Примерный эквивалент |
|---|---|---|
| px | Пиксель, основная единица экрана | — |
| pt | Пункт, типографская единица | 1in = 72pt |
| pc | Пика, равна 12 пунктам | 1pc = 12pt |
| in | Дюйм | 1in = 2.54cm |
| cm | Сантиметр | 1cm = 10mm |
| mm | Миллиметр | — |
| em | Относится к текущему размеру шрифта | Зависит от размера родительского шрифта |
| rem | Относится к размеру шрифта корневого элемента | Зависит от размера шрифта элемента <html> |
| % | Процент от размера родительского элемента | Зависит от родительского элемента |
| vw/vh | Проценты от ширины/высоты вьюпорта | 1vw = 1% от ширины вьюпорта |
| ex | Основан на высоте строчных букв текущего шрифта | — |
| ch | Ширина символа «0» текущего шрифта | — |
Такая таблица может быть весьма полезной для новичков, так как она предоставляет быстрый и удобный способ сравнения различных единиц измерения в CSS.
Полезные статьи ресурсы на тему Единиц измерения в CSS
Единицы CSS — подробная сатья (англ. язык)
