Пошук уроків, статей та іншого контенту
Застосуєте clamp() для плавного масштабування шрифтів, відступів і розмірів між мінімальним та максимальним значеннями.
clamp()Функція clamp() задає значення, яке плавно змінюється між мінімальним і максимальним обмеженнями:
властивість: clamp(мінімальне, бажане, максимальне);Наприклад:
.title {
font-size: clamp(2rem, 5vw, 4rem);
}У цьому прикладі:
2rem — мінімальний розмір;
5vw — бажаний, або гнучкий, розмір;
4rem — максимальний розмір.
Браузер обчислює 5vw, але ніколи не застосує значення менше за 2rem або більше за 4rem.
Отже, розмір заголовка:
не стане надто малим на вузькому екрані;
поступово збільшуватиметься під час розширення вікна;
зупиниться на максимальному значенні на широкому екрані.
.property {
value: clamp(MIN, PREFERRED, MAX);
}Усі три аргументи мають бути допустимими CSS-значеннями для конкретної властивості.
.card {
padding: clamp(1rem, 3vw, 3rem);
border-radius: clamp(0.5rem, 1vw, 1rem);
font-size: clamp(1rem, 1.5vw, 1.25rem);
}Зазвичай середнім аргументом є відносна одиниця:
vw — частка ширини вікна;
vh — частка висоти вікна;
rem або em — масштабування відносно шрифту;
комбінація одиниць через calc().
clamp() кращий за кілька медіазапитівБез clamp() плавний масштаб часто реалізують за допомогою кількох медіазапитів:
.title {
font-size: 2rem;
}
@media (min-width: 768px) {
.title {
font-size: 3rem;
}
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}Такий підхід змінює розмір ступінчасто. Між контрольними точками значення залишається незмінним.
За допомогою clamp() розмір змінюється безперервно:
.title {
font-size: clamp(2rem, 5vw, 4rem);
}Медіазапити все ще потрібні, коли змінюється сама структура інтерфейсу. Але для плавних значень clamp() часто дозволяє уникнути великої кількості брейкпойнтів.
h1 {
font-size: clamp(2rem, 6vw, 5rem);
line-height: 1.05;
}Для ширини вікна 800px значення 6vw дорівнює 48px. Якщо це значення потрапляє між мінімумом і максимумом, браузер використає саме його.
На невеликих екранах:
6vw може бути меншим за 2remТому фактичний розмір не опуститься нижче 2rem.
На великих екранах:
6vw може бути більшим за 5remТому фактичний розмір не перевищить 5rem.
body {
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
}Використання rem у мінімальному та максимальному значеннях робить обмеження залежними від базового розміру шрифту документа. Додавання vw до середнього значення забезпечує плавну зміну.
Не варто робити мінімальний розмір основного тексту надто малим. Текст має залишатися зручним для читання на невеликих екранах.
Для line-height можна використовувати безрозмірні числа:
.article {
line-height: clamp(1.4, 1.2 + 0.4vw, 1.8);
}Однак для тексту часто достатньо звичайного сталого значення:
.article {
line-height: 1.6;
}clamp() тут доречний, якщо дизайн справді передбачає різний міжрядковий інтервал на різних розмірах екрана.
Функція працює не лише зі шрифтами. Її можна застосовувати до padding, margin і gap.
.section {
padding-block: clamp(3rem, 8vw, 8rem);
padding-inline: clamp(1rem, 5vw, 6rem);
}
.section__content {
gap: clamp(1rem, 3vw, 3rem);
}У цьому прикладі:
вертикальні відступи секції масштабуються від 3rem до 8rem;
горизонтальні відступи не стають меншими за 1rem;
проміжок між елементами змінюється без медіазапитів.
Для логічних властивостей зручно використовувати padding-block, padding-inline, margin-block і margin-inline. Вони не прив’язані безпосередньо до назв фізичних сторін top, right, bottom, left.
clamp() можна застосувати до ширини елемента:
.container {
width: clamp(16rem, 80vw, 72rem);
margin-inline: auto;
}Контейнер:
не буде вужчим за 16rem;
на проміжних ширинах займатиме 80vw;
не стане ширшим за 72rem.
Так можна обмежити ширину картки або іншого компонента:
.dialog {
width: clamp(18rem, 60vw, 42rem);
}Для висоти функцію теж можна використовувати, але слід пам’ятати про вміст:
.hero {
min-height: clamp(24rem, 70vh, 48rem);
}min-height безпечніший за жорсткий height: якщо тексту стане більше, блок зможе розширитися.
clamp() і calc()Середній аргумент може містити calc(). Це дає змогу поєднати базове значення з гнучкою частиною:
h1 {
font-size: clamp(2rem, calc(1.25rem + 3vw), 4.5rem);
}Тут:
1.25rem — базова частина;
3vw — частина, що залежить від ширини вікна;
2rem і 4.5rem — межі.
calc() особливо корисний, коли одного vw недостатньо. Наприклад, clamp(1rem, 4vw, 3rem) може змінюватися надто повільно або надто швидко. Додавання базового значення дозволяє точніше налаштувати криву масштабування.
Нижче наведено повний приклад сторінки з плавною типографікою, відступами, шириною контейнера та проміжками між картками.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Плавний дизайн</title>
<style>
:root {
color-scheme: light;
font-family: system-ui, sans-serif;
color: #172033;
background: #f4f7fb;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-size: clamp(1rem, calc(0.95rem + 0.25vw), 1.15rem);
line-height: 1.6;
}
.page {
min-height: 100vh;
padding-block: clamp(2rem, 7vw, 7rem);
padding-inline: clamp(1rem, 5vw, 5rem);
}
.container {
width: min(100%, clamp(20rem, 88vw, 72rem));
margin-inline: auto;
}
.hero {
padding: clamp(1.5rem, 5vw, 5rem);
border-radius: clamp(1rem, 2vw, 2rem);
color: white;
background: linear-gradient(135deg, #2541b2, #4d7cff);
}
.hero__title {
max-width: 12ch;
margin: 0;
font-size: clamp(2.25rem, calc(1.5rem + 5vw), 5.5rem);
line-height: 1.05;
}
.hero__text {
max-width: 60ch;
margin-block: clamp(1rem, 2.5vw, 2rem) 0;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: clamp(1rem, 3vw, 2.5rem);
margin-block-start: clamp(1.5rem, 4vw, 4rem);
}
.feature {
padding: clamp(1.25rem, 3vw, 2.5rem);
border: 1px solid #dce3f0;
border-radius: clamp(0.75rem, 1.5vw, 1.5rem);
background: white;
}
.feature h2 {
margin-block: 0 clamp(0.5rem, 1vw, 1rem);
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.2;
}
.feature p {
margin: 0;
}
</style>
</head>
<body>
<main class="page">
<div class="container">
<section class="hero">
<h1 class="hero__title">Інтерфейс, що масштабується плавно</h1>
<p class="hero__text">
Розміри тексту та відступи змінюються поступово, але залишаються
в установлених межах.
</p>
</section>
<section class="features" aria-label="Переваги">
<article class="feature">
<h2>Мінімум</h2>
<p>На вузькому екрані елементи не стають меншими за заданий мінімум.</p>
</article>
<article class="feature">
<h2>Гнучкість</h2>
<p>На проміжних ширинах розміри адаптуються до доступного простору.</p>
</article>
<article class="feature">
<h2>Максимум</h2>
<p>На широкому екрані значення зупиняються на заданій верхній межі.</p>
</article>
</section>
</div>
</main>
</body>
</html>Мінімум має працювати на найвужчому цільовому екрані.
.title {
font-size: clamp(2rem, ..., ...);
}Для тексту це значення не повинно погіршувати читабельність. Для відступу воно має залишати достатньо простору навколо вмісту.
Максимум захищає дизайн на великих екранах.
.title {
font-size: clamp(2rem, ..., 5rem);
}Без верхньої межі значення на широкому моніторі може стати непропорційно великим.
Почніть із простого vw:
.title {
font-size: clamp(2rem, 5vw, 5rem);
}Якщо зміна відбувається надто повільно або надто швидко, використайте calc():
.title {
font-size: clamp(2rem, calc(1.25rem + 3vw), 5rem);
}Перевірте компонент щонайменше в трьох режимах:
на вузькому екрані;
на проміжній ширині;
на широкому екрані.
Переконайтеся, що:
текст не виходить за межі контейнера;
заголовки не займають надто багато рядків;
відступи не створюють зайвого порожнього простору;
мінімальні значення не роблять інтерфейс тісним;
максимальні значення не роблять елементи непропорційними.
min() і max()clamp() можна розглядати як поєднання двох обмежень:
font-size: clamp(1rem, 2vw, 2rem);Приблизно те саме логічне правило можна записати так:
font-size: max(1rem, min(2vw, 2rem));Але clamp() значно коротший і краще передає намір: значення має бути між мінімумом і максимумом.
min() вибирає найменше значення;
max() вибирає найбільше значення;
clamp() утримує значення в заданому діапазоні.
Для звичайного плавного масштабування найзручнішим вибором є саме clamp().
Плавне масштабування не означає, що розміри можна зменшувати без обмежень.
Дотримуйтеся таких правил:
задавайте розумний мінімальний розмір шрифту;
не використовуйте надмірно малий line-height;
перевіряйте сторінку зі збільшеним масштабом браузера;
не покладайтеся лише на розмір шрифту для ієрархії — використовуйте також відступи, товщину шрифту та структуру заголовків;
не встановлюйте жорстку висоту для блоків із текстом, якщо текст може змінити кількість рядків.
clamp() не замінює тестування. Його завдання — задати передбачувану поведінку між крайніми значеннями.
Неправильно:
.title {
font-size: clamp(5rem, 5vw, 2rem);
}Мінімальне значення має бути не більшим за максимальне. Правильний порядок:
.title {
font-size: clamp(2rem, 5vw, 5rem);
}Неправильно:
.card {
padding: clamp(16, 3vw, 48);
}Для padding потрібні одиниці вимірювання:
.card {
padding: clamp(1rem, 3vw, 3rem);
}Винятком є властивості, для яких числа без одиниць допустимі, наприклад line-height.
.title {
font-size: clamp(0.75rem, 10vw, 8rem);
}Такий діапазон може зробити заголовок непридатним для читання на малих екранах і надмірно великим на великих. Межі слід підбирати відповідно до ролі елемента.
vw.title {
font-size: 5vw;
}Без обмежень заголовок може стати:
занадто малим на вузькому екрані;
занадто великим на широкому екрані.
Надійніший варіант:
.title {
font-size: clamp(2rem, 5vw, 5rem);
}clamp() до властивості, яка має змінюватися ступінчастоclamp() добре підходить для розмірів, але не замінює медіазапити для зміни структури. Наприклад, перемикання між одним і двома стовпцями — це структурна зміна. Для неї можна використовувати grid-template-columns разом із медіазапитом або адаптивними можливостями Grid.
Навіть добре підібраний розмір шрифту не гарантує зручного читання. Обмежуйте ширину текстових блоків:
.article {
max-width: 65ch;
}Одиниця ch приблизно відповідає ширині символу поточного шрифту, тому допомагає контролювати довжину рядка.
clamp() має синтаксис clamp(мінімум, бажане значення, максимум).
Бажане значення змінюється плавно, але результат завжди залишається в заданих межах.
Функція підходить для font-size, padding, margin, gap, width, min-height та інших властивостей із числовими значеннями.
Відносні одиниці vw, vh, rem і em допомагають створити гнучке середнє значення.
calc() у середньому аргументі дає змогу поєднувати базове та адаптивне значення.
Мінімум і максимум потрібно підбирати з урахуванням читабельності та пропорцій інтерфейсу.
clamp() зменшує кількість медіазапитів для плавних змін, але не замінює їх для структурних змін макета.