Генератор CSS clamp()
Налаштування clamp
Живий перегляд
Про CSS Clamp Generator
CSS clamp() дозволяє задати мінімальне значення, гнучке preferred значення і максимальне значення в одному виразі. Це особливо корисно для fluid typography і responsive spacing.
Цей генератор рахує clamp() expression на основі мінімального та максимального розміру і viewport діапазону, в якому значення має плавно змінюватися.
Як користуватися
- Виберіть CSS property, для якої треба згенерувати значення.
- Задайте minimum і maximum size.
- Задайте viewport range, в якому значення має масштабуватися.
- Скопіюйте clamp() value або повний CSS rule.
Поради
- Використовуйте clamp() для заголовків, які мають плавно масштабуватися між mobile і desktop.
- Для padding або gap clamp() часто дозволяє прибрати зайві breakpoint rules.
- Minimum viewport має бути меншим за maximum viewport.
Перевірки CSS clamp() перед публікацією fluid values
Fluid formula потребує корисних мінімальної та максимальної меж, передбачуваного viewport range і перевірки проміжних розмірів.
Визначте реальні межі
Обирайте minimum і maximum із вимог дизайну, не виходячи за межі читабельних або зручних розмірів.
Перевірте preferred value
Переконайтеся, що rem і viewport coefficients дають потрібні endpoints та значення не зменшується зі зростанням viewport.
Тестуйте проміжні ширини
Перевірте телефони, tablets, laptops, wide screens, zoom і довгі переклади, а не лише дві крайні точки.
Збережіть accessibility
Використовуйте relative units доречно та перевірте реакцію тексту на browser zoom і user font-size preferences.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.