Единицы измерения в CSS
Сегодня мы поговорим о единицах измерения в CSS. Понимание различных единиц измерения и их правильное использование — ключ к созданию адаптивных и гибких макетов. Давайте разберёмся, какие бывают единицы измерения и когда их использовать! 🚀
1. Абсолютные единицы
Абсолютные единицы имеют фиксированные значения, которые не зависят от контекста. Они удобны для точного позиционирования, но могут быть менее гибкими в адаптивном дизайне.
- px (пиксели): Самая распространенная единица измерения. 1px соответствует одному пикселю экрана.
css
.container {
width: 300px;
}
- cm (сантиметры): 1cm равен 96 пикселям.
css
.box {
width: 10cm;
}
- mm (миллиметры): 1mm равен 1/10 сантиметра.
css
.box {
width: 50mm;
}
- in (дюймы): 1in равен 2.54 сантиметра (96 пикселей).
css
.box {
width: 2in;
}
- pt (пункты): 1pt равен 1/72 дюйма (1.3333 пикселя).
css
.text {
font-size: 12pt;
}
- pc (пика): 1pc равен 12 пунктам (16 пикселей).
css
.text {
font-size: 1pc;
}
2. Относительные единицы
Относительные единицы зависят от других свойств или контекста и более гибкие для адаптивного дизайна.
- % (проценты): Процентное отношение к родительскому элементу.
css
.container {
width: 50%;
}
- em: Относительная единица, основанная на размере шрифта родительского элемента.
css
.text {
font-size: 2em; /* в 2 раза больше размера шрифта родителя */
}
- rem: Относительная единица, основанная на размере шрифта корневого элемента (
<html>).
css
.text {
font-size: 1.5rem; /* в 1.5 раза больше размера шрифта корня */
}
- vw (viewport width): 1vw равен 1% ширины области просмотра.
cssКопировать код
.container {
width: 50vw;
}
- vh (viewport height): 1vh равен 1% высоты области просмотра.
cssКопировать код
.container {
height: 50vh;
}
- vmin и vmax: Относительные единицы, основанные на минимальном и максимальном измерении области просмотра.
cssКопировать код
.box {
width: 50vmin; /* 50% от меньшего значения высоты или ширины */
}
3. Специальные единицы
- ch: Ширина символа "0" текущего шрифта.
cssКопировать код
.input {
width: 20ch;
}
- ex: Высота буквы "x" текущего шрифта.
cssКопировать код
.text {
line-height: 2ex;
}
- fr (fractional unit): Единица, используемая в CSS Grid для распределения свободного пространства.
cssКопировать код
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
}