LibraTool logoLibraTool

Акысыз CSS clamp() генератору

Ыкчам типография жана боштуктар үчүн ийкемдүү CSS clamp() маанисин жаратыңыз. Мин/макс өлчөмдү жана көрүнүш аймагы диапазонун коюп, түз алдын ала көрүңүз жана бир сапта CSS-ти көчүрүп алыңыз.

Жүктөлгөндөн кийин оффлайн иштейт
Чыгуу бирдиги:
CSS мааниси
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind классы
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px туурасында → 21.9px
Aa 22px

Ар кандай көрүнүш аянттарында чагылдырылган өлчөм

375px туурасындаAa 16px
908px туурасындаAa 24px
1440px туурасындаAa 32px

clamp(min, preferred, max) маанини көрүнүш аянтына жараша ийкемдүү масштабдайт, андан кийин мин жана макс чекте бекитет. Ал типографиянын, боштуктардын жана туурасынын медиа-сурам топтомдорун бир сапка алмаштырат.

Бул кантип иштейт

Бул курал CSS clamp() маанилерин кол менен жазылган сызыктуу интерполяция формуласы колдонуп эсептейт — китепкана жок, серверге кайрылуу жок. Эки өлчөмдү жана эки экран тепкич туурасын киргизесиз; математика браузериңизде дароо иштейт жана ошол чекиттердин ортосунда тексттиңизди же боштугуңузду тегиз масштабдаган vw-негизделген артыкчылыктуу маани менен чапталууга даяр clamp() туюнтмасын жаратат.

  1. 1
    Сызыктуу тик бурч эсептөө
    Курал пиксел-башына-пиксел тик бурчту эсептейт: (maxSize - minSize) / (maxViewport - minViewport). Бул тик бурч андан кийин 100гo көбөйтүлүп vw бирдигине айландырылат, бул CSS экран тепкич-салыштырмалуу масштабдоо кандай иштээринин негизи.
  2. 2
    Кесилиш чекитин алуу
    Кесилиш оффсети (px же rem менен) сызыктуу функция минималдуу экран тепкичте так минималдуу өлчөмүңүзгө тийиши үчүн эсептелет. Тик бурч жана кесилиш чекити чогуу clamp() ичиндеги артыкчылыктуу маанини — чынында масштабдаган бөлүгүн — түзөт.
  3. 3
    Бирдик айландыруу жана чыгуу форматтоо
    Эгер rem чыгуусун тандасаңыз, ар бир пиксел маани clamp() сабына жазылганга чейин конфигурацияланган тамырдык шрифт өлчөмүнө (демейки 16px) бөлүнөт. Дал келген Tailwind ыктыярдуу-маани классы да, боштуктар Tailwind'дин синтаксиси боюнча астыңкы сызык менен алмаштырылып, жаралат.
  4. 4
    Тирүү экран тепкич сырганагыч алдын ала көрүү
    Диапазон сырганагыч 320пикселден 1920пикселге чейин сыдырууга уруксат берет. Ар бир позицияда ошол эле тик бурч-жана-кесилиш формуласы чапталган өлчөмдү реалдуу убакытта баалайт жана ошол эсептелген пиксел өлчөмүндө үлгү текст тартат, ошондуктан эч нерсе көчүрбөй туруп масштабдоо жүрүм-турумун көрө аласыз.

Байланыштуу куралдар

🟦

CSS Grid генератору

CSS торду визуалдык түрдө түзүңүз — тректер, бирдиктер жана боштуктар — жана даяр CSS менен HTML кодун көчүрүп алыңыз.

Байкап көрүңүз
✍️

Кол Тамга Жасагыч

Чычканыңыз, манжаңыз же стилус менен кол тамга тартыңыз, же атыңызды кол жазуу шрифтинде терип, андан кийин аны ачык фондуу PNG же SVG катары экспорттоңуз.

Байкап көрүңүз
📐

Пиксель-REM конверттегич

px, rem, em, pt, vw, vh жана % ортосунда ыңгайлаштырылуучу негизги арип өлчөмү менен конверттеңиз. Кеңири таралган пиксель өлчөмдөрү үчүн шилтеме таблицасын камтыйт.

Байкап көрүңүз

Көп берилүүчү суроолор