Clamp css что это?

Порядок такой: clamp(минимум, желаемое, максимум). Для текста подойдет отправная точка font-size: clamp(1rem, .5rem + 2vw, 2rem). Средняя часть меняется с шириной окна, но не выходит за пределы. Если она меньше минимума или больше максимума, браузер использует соответствующую границу. Проверьте читаемость и масштабирование, поскольку формула сама по себе не гарантирует удобный размер.

1. Читайте clamp как три аргумента: нижняя граница, предпочтительное значение и верхняя граница. Например, font-size: clamp(1rem, .5rem + 2vw, 2rem) задает гибкий размер между 1rem и 2rem.
2. Сначала браузер рассчитывает среднее выражение. Если оно попадает между границами, используется оно. Если получилось меньше нижнего предела, берется нижний. Если больше верхнего, берется верхний.
3. При корневом шрифте 16px и ширине viewport 320px среднее выражение равно 14.4px, поэтому итогом станет нижняя граница 16px. При ширине 1000px среднее равно 28px и остается внутри диапазона. При ширине 2000px оно уже равно 48px, поэтому сработает верхняя граница 32px.
4. Эти цифры являются расчетом для указанного корневого размера. Если пользователь или сайт изменит его, rem-границы тоже изменятся. Не считайте rem неизменным синонимом конкретного количества пикселей.
5. Подберите среднюю часть под макет, сохраняя читаемый минимум. Смесь rem и viewport-единиц часто удобнее чистого vw, но все равно требует проверки увеличенного текста и масштаба страницы.
6. Убедитесь, что нижняя граница не больше верхней. При противоречивых пределах поведение не следует воспринимать как автоматически исправленный диапазон.
7. Clamp можно применять не только к font-size, но и к другим совместимым числовым значениям, например отступам. Это не замена всей адаптивной раскладке: если нужно поменять количество колонок или порядок блоков, одного плавного размера недостаточно.