Делаем fluid-значения в CSS предсказуемыми clamp() отлично подходит… — Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js@frontendproglib · 21K subscribers Open in TelegramOpen

📐 Делаем fluid-значения в CSS предсказуемыми

clamp() отлично подходит для адаптивных размеров, но результат может быть вроде 19.7px или 143.2px.

Функция round() позволяет привязать вычисленное значение к нужному шагу:


.title {
  --size: clamp(1rem, 1rem + 2cqw, 2rem);
  font-size: round(down, var(--size), 4px);
}

Теперь размер будет двигаться по шагам: 16px → 20px → 24px → 28px → 32px. Можно использовать up, down, nearest или to-zero.

Особенно полезно для типографики, spacing и привязки элементов к layout grid.