📐 Делаем 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.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #css