Содержание
Когда вы задаёте элементу ширину, высоту или размер шрифта, вы указываете число и единицу измерения. От выбора единицы зависит, как элемент поведёт себя на разных экранах. Одни единицы фиксированные и не меняются, другие подстраиваются под размер окна или родительского блока. В этой статье разберём, какие единицы существуют и когда какую использовать в контексте веб-плаката.
Пиксели (px)
Пиксель px — самая понятная единица. Один пиксель равен одной точкой на экране. Если вы написали width: 200px, блок будет шириной ровно 200 пикселей на любом устройстве и при любом размере окна. Он не сожмётся на телефоне и не растянется на мониторе.
100×100 px
200×100 px
300×100 px
<div class="box-small">100×100 px</div>
<div class="box-medium">200×100 px</div>
<div class="box-large">300×100 px</div>
.box-small {
width: 100px;
height: 100px;
}
.box-medium {
width: 200px;
height: 100px;
}
/* Пиксели — фиксированные.
Сужай окно — блоки не изменятся. */
Пиксели хороши там, где нужна предсказуемость. Толщина рамки, размер иконки, ширина промежутка между элементами удобно задавать в пикселях, потому что эти значения не должны меняться от экрана к экрану.
Проблема начинается, когда пикселями задаётся всё подряд. Блок шириной 800px красиво смотрится на десктопе, но на телефоне шириной 390px он вылезет за край экрана. Заголовок размером 64px будет доминировать на десктопе, но на мобильном займёт три строки и превратится в кашу. Пиксели не адаптируются, и это их ограничение.
Проценты (%)
Проценты % — первый шаг к гибкости. Значение width: 50% означает «займи половину ширины родительского контейнера». Если родитель стал уже, ребёнок тоже сужается. Это делает раскладку адаптивной без дополнительных усилий.
width: 50%
width: 75%
width: 100%
<div class="parent">
<div class="child-50">width: 50%</div>
<div class="child-75">width: 75%</div>
<div class="child-100">width: 100%</div>
</div>
.child-50 { width: 50%; }
.child-75 { width: 75%; }
.child-100 { width: 100%; }
/* Проценты считаются от ширины родителя.
Родитель стал уже — дети тоже. */
Попробуйте изменить ширину окна браузера, и вы увидите, как блоки подстраиваются. Проценты отлично работают для горизонтального деления пространства внутри контейнеров. Три блока по width: 33.33% всегда займут ровно три колонки, независимо от ширины экрана.
Важный нюанс: проценты для высоты height: 50% работают только если у родителя задана конкретная высота. Без неё браузер не знает, от чего считать 50%, и игнорирует значение. Это частый источник путаницы у начинающих.
Вьюпорты (vw, vh)
Viewport-единицы пожалуй, самые полезные единицы для веб-плаката. 1vw равен одному проценту от ширины окна браузера, 1vh занимает один процент от высоты. В отличие от процентов, они считаются не от родителя, а от видимой области экрана.
height: 30vh
5vw текст
<div class="vw-bar">width: 50vw</div>
<div class="vw-text">5vw текст</div>
<div class="vh-box">height: 30vh</div>
.vw-bar {
width: 50vw;
height: 60px;
}
.vw-text {
font-size: 5vw;
}
.vh-box {
height: 30vh;
}
/* 1vw = 1% ширины окна браузера.
1vh = 1% высоты окна браузера.
Сужай окно — всё масштабируется. */
Это значит, что элемент с width: 50vw всегда занимает ровно половину экрана, независимо от того, внутри какого контейнера он находится. А текст с font-size: 5vw маштабируется плавно вместе с окном — на широком экране он крупный, на узком сжимается пропорционально.
Для веб-плаката viewport-единицы — это инструмент пропорционального масштабирования. Если вы зададите все размеры в vw, плакат будет выглядеть как уменьшенная копия самого себя на любом экране. Все пропорции сохраняются.
Космос
<section class="poster">
<div class="circle"></div>
<div class="circle-2"></div>
<h1 class="title">Космос</h1>
</section>
.title {
font-size: 8vw;
}
.circle {
position: absolute;
width: 15vw;
height: 15vw;
border-radius: 50%;
}
/* Всё в vw — плакат масштабируется
пропорционально при любой ширине окна.
Идеально для хаотичных и непрерывных
композиций. */
Этот подход идеально работает для хаотичных и непрерывных композиций с абсолютным позиционированием. Декоративные круги размером 15vw на широком экране будут большими, на узком маленькими, но их соотношение с остальными элементами не изменится.
В каталоге веб-плакатов многие одноэкранные работы построены целиком на viewport-единицах. Это позволяет им масштабироваться пропорционально без единого media query. Если ваш плакат имеет композицию без длинных текстов, vw подход может стать самым простым путём к адаптивности.
Универсальные (rem)
rem (root em) — единица, которая считается от размера шрифта корневого элемента <html>. По умолчанию браузер устанавливает font-size: 16px для <html>, поэтому 1rem = 16px, 1.5rem = 24px, 2rem = 32px.
1rem = 16px (базовый)
1.5rem = 24px
2rem = 32px
3rem = 48px
<p class="text-1rem">1rem = 16px</p>
<p class="text-1-5rem">1.5rem = 24px</p>
<p class="text-2rem">2rem = 32px</p>
<p class="text-3rem">3rem = 48px</p>
html { font-size: 16px; }
.text-1rem { font-size: 1rem; }
.text-1-5rem { font-size: 1.5rem; }
.text-2rem { font-size: 2rem; }
.text-3rem { font-size: 3rem; }
/* rem считается от font-size в html.
Меняешь одно значение в :root —
вся типографика масштабируется. */
Зачем использовать rem, если можно просто писать пиксели? Потому что rem создаёт систему. Если вся типографика задана в rem, достаточно изменить одно значение в :root, чтобы пропорционально масштабировать все тексты на странице. В media query для мобильного экрана вы уменьшаете font-size у html с 16px до 14px, и вся типографика автоматически становится мельче, сохраняя пропорции между заголовками и основным текстом.
Для отступов и промежутков rem тоже полезен. padding: 1.5rem и gap: 1rem создают ритм, привязанный к типографической шкале. Если вы измените базовый размер шрифта, отступы изменятся вместе с ним.
Чем опасные вьюпорты
Viewport-единицы для текста дают красивый эффект пропорционального масштабирования, но у них есть серьёзная проблема. На очень маленьких экранах текст может стать нечитаемо мелким, а на очень больших — неприлично крупным.
Заголовок 32px
font-size: 32px — не меняется при ресайзе
Заголовок 4vw
font-size: 4vw — растёт и сжимается вместе с окном
<h1 class="text-fixed">Заголовок 32px</h1>
<h1 class="text-fluid">Заголовок 4vw</h1>
.text-fixed { font-size: 32px; }
.text-fluid { font-size: 4vw; }
/* На экране 1440px: 4vw = 57.6px.
На экране 390px: 4vw = 15.6px.
Чистый vw может стать нечитаемым
на маленьких экранах — используйте
clamp() для ограничения. */
Заголовок с font-size: 4vw на экране 1440px имеет размер около 58 пикселей — отлично. На экране 390px он сжимается до 15.6 пикселей,мельче основного текста, читать невозможно. На 4K-мониторе шириной 3840px он вырастает до 154 пикселей, а это уже чрезмерно.
Решение — функция clamp(), которая ограничивает значение сверху и снизу.
Заголовок на clamp()
Подзаголовок тоже масштабируется, но в своём диапазоне от 14 до 24 пикселей
<h1 class="title">Заголовок на clamp()</h1>
<p class="subtitle">Подзаголовок тоже...</p>
.title {
font-size: clamp(24px, 5vw, 64px);
}
.subtitle {
font-size: clamp(14px, 2vw, 24px);
}
/* clamp(минимум, предпочтительное, максимум)
Текст растёт с окном, но никогда
не станет меньше 24px
и больше 64px. */
Запись font-size: clamp(24px, 5vw, 64px) означает: «используй 5vw, но никогда не меньше 24px и не больше 64px». Текст масштабируется плавно в заданном диапазоне и остаётся читаемым на любом экране. Это лучший способ задавать размер заголовков в веб-плакате.
clamp() работает не только с font-size. Его можно использовать для padding, gap, width и любого другого свойства, которое принимает числовые значения. Например, padding: clamp(16px, 3vw, 48px) создаёт отступы, которые растут с экраном, но не становятся ни слишком маленькими, ни слишком большими.
Что писать, а что нет
В vw и vh стоит задавать размеры декоративных элементов — кругов, фигур, фонов — которые должны масштабироваться пропорционально. Позиции абсолютно спозиционированных объектов через top и left удобно выражать в процентах или vw.
Высоту полноэкранных секций естественно задавать через height: 100vh. Размеры шрифтов заголовков тоже можно писать в vw, но обязательно через clamp() с минимумом и максимумом.
В px или rem стоит оставить основной текст font-size: 16px или 1rem, промежутки между элементами (gap: 16px), толщину рамок border: 1px, скругления углов border-radius: 8px и ширину контейнеров с текстовым содержимым max-width: 600px
Логика простая. Если элемент визуальный и декоративный, то ему хорошо на viewport-единицах, пусть масштабируется. Если элемент несёт текст и информацию, то ему нужна стабильная читаемость, а значит, фиксированные или ограниченные значения.
Декор — vw, текст — clamp
Круги масштабируются с окном, а текст остаётся читаемым на любом экране.
<section class="hero">
<div class="decor"></div>
<div class="content">
<h2>Заголовок</h2>
<p>Описание плаката...</p>
</div>
</section>
/* Декор — пропорциональный */
.decor {
width: 20vw;
height: 20vw;
}
/* Заголовок — масштабируемый с границами */
h2 {
font-size: clamp(20px, 4vw, 48px);
}
/* Основной текст — фиксированный */
p {
font-size: 16px;
max-width: 400px;
}
В этом примере декоративные круги заданы в vw и масштабируются с окном, заголовок использует clamp() для контролируемого масштабирования, а основной текст стоит на фиксированных 16px и ограничен по ширине через max-width. Три единицы, каждая на своём месте.
Шпаргалка
px — фиксированный размер, не меняется. Для мелких деталей, рамок, иконок.
% — доля от родителя. Гибко по ширине, капризно по высоте. Для деления пространства внутри контейнеров.
vw — доля от ширины экрана. Для пропорционального масштабирования элементов и декора.
vh — доля от высоты экрана. Для полноэкранных секций 100vh
rem — доля от базового шрифта. Для типографики и ритмичных отступов.
clamp(min, preferred, max) — значение с границами. Для заголовков и адаптивных размеров, которые должны масштабироваться, но не уходить в крайности.
