CSS clamp() Калкулатор

Въведете размер за малки и големи екрани и получете адаптивна clamp() стойност, която се мащабира плавно между тях — за шрифтове, отстояния, маржове или празнини.

Размери
Минимум
Максимум
стойност на clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Резултатът запазва rem част в средния аргумент, така че текстът все още се увеличава, когато потребителят мащабира до 200% — стойност, базирана само на viewport, не би позволила това.

Преглед

Адаптивен текст с перфектен размер.

Регулирайте размерите и ширините на екрана, за да оформите стойността.

Изчислението се извършва изцяло във Вашия браузър. Нищо от въведеното тук не се изпраща към BroBroGo.

ЧЗВ

Как калкулаторът изгражда стойността на clamp()?

Задавате две точки: размер при малка ширина на екрана и размер при голяма ширина. Калкулаторът изчертава права линия между тях, така че размерът да расте плавно с разширяването на екрана, и след това го обвива в clamp(), така че никога да не пада под размера за малък екран или да надвишава този за голям екран. Между двете ширини размерът се мащабира плавно; извън тях се задържа на съответния лимит.

Защо резултатът е в rem и vw вместо в пиксели?

Границите са в rem, а променящата се средна част запазва rem компонент, така че текстът все още расте, когато читателят мащабира или увеличи размера на шрифта по подразбиране в браузъра си — стойност само в пиксели или viewport може да попречи на това. Въвеждате размерите в пиксели, тъй като повечето хора мислят в тях, а инструментът ги преобразува в rem спрямо основния размер на шрифта (root font size).

Мога ли да използвам това за отстояния, а не само за размер на шрифта?

Да. Същата стойност работи за padding, margin, gap, width или height — навсякъде, където се изисква дължина. Превключете визуализацията на „Кутия“ (Box), за да наблюдавате как расте отстоянието вместо текста. Ако малкият и големият Ви размер са еднакви, резултатът се съкращава до обикновена фиксирана дължина, тъй като няма какво да се мащабира.

Всички браузъри ли поддържат clamp()?

Да — всеки съвременен браузър поддържа clamp() от 2020 г. насам, така че можете да използвате стойността директно без алтернативни варианти (fallbacks). При много голям максимум или бърза скорост на промяна е добре да направите бърза проверка при 200% мащабиране, за да се уверите, че текстът все още се увеличава за читателите, които се нуждаят от това.

CSS Cubic Bezier ГенераторПлъзнете двете дръжки, за да оформите крива на ускорение, наблюдавайте движението на точката спрямо постоянна скорост и копирайте cubic-bezier() стойността.Генератор на Box ShadowПлъзгайте регулаторите, за да оформите box-shadow, наслагвайте слоеве за дълбочина и копирайте готовия CSS веднага.Генератор на градиентиСъздайте линеен, радиален или коничен градиент, добавете цветни точки, задайте посоката и копирайте готовия CSS с едно щракване.Генератор на Border RadiusЗаобляйте всеки ъгъл с плъзгачи, оформяйте органични петна с елиптичния режим и копирайте CSS кода мигновено.Генератор на FlexboxНастройте flex контейнер и неговите елементи с визуални контроли, наблюдавайте промените в реално време и копирайте CSS кода с едно щракване.CSS Grid ГенераторНастройте Вашите колони и редове, плъзнете по клетките, за да разположите елементи, и копирайте CSS кода с подходящ HTML с едно щракване.CSS форматиране и минифициранеПренаредете разхвърляния CSS за лесно четене или го минифицирайте за по-бързо зареждане — с безопасен режим, който никога не променя реда на правилата Ви.Конвертор от px към rem и emКонвертирайте между px, rem и em, като използвате Ваши собствени размери за основен шрифт и контекст — редактирайте което и да е поле и останалите две се обновяват, докато пишете.