Абсолютные единицы CSS
Длина, заданная абсолютной единицей, фиксирована: она всегда отображается именно в этом размере.
Размер экрана не влияет на эти единицы, поэтому они не рекомендуются для веб-сайтов. Тем не менее они могут быть полезны, если известен выходной носитель, например при печатной вёрстке.
Из них всех чаще всего используется px (пиксели).
Полный набор абсолютных CSS-единиц:
px— Пиксели, лучший выбор для экранов (1px = 1/96 от 1in).cm— Сантиметры, в основном для таблиц стилей для печати.mm— Миллиметры, в основном для таблиц стилей для печати.in— Дюймы, в основном для таблиц стилей для печати (1in = 96px = 2.54cm).pt— Пункты, единица из типографики (1pt = 1/72 от 1in).pc— Пики, единица из печатного дела (1pc = 12pt).
Задание размера шрифта в Px
Задание размера текста в px (пикселях) даёт вам полный контроль над тем, насколько большим он выглядит.
Обратная сторона в том, что страница может плохо масштабироваться на разных размерах экрана, а пользователи не могут менять размер текста в настройках браузера. Однако инструмент масштабирования всё равно работает и изменяет размер всей страницы.
Примечание: Число и единицу измерения нельзя разделять пробелом. При значении 0 единицу можно опустить.
Пример
Размеры шрифта, заданные в px:
Вывод: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Size With Px</title>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Когда использовать абсолютные единицы
Абсолютные единицы подходят для таких ситуаций:
- Размеры должны быть точными и фиксированными.
- Дизайн предназначен для печатных носителей.
- Элемент не должен масштабироваться вместе с окном просмотра (viewport).
Совет: Относительные единицы, такие как em или rem, обеспечивают лучшую адаптивность, и их стоит рассмотреть для большинства задач веб-дизайна.