LibraTool logoLibraTool

Тавлидкунандаи CSS clamp()-и ройгон

Арзиши равони CSS clamp()-ро барои шрифт ва фосилаи ҷавобгӯй тавлид кунед. Андозаи ҳадди ақал/ҳадди аксар ва диапазони viewport-ро гузоред, пешнамоиши зинда бубинед ва 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

Андозаи натиҷа дар экранҳои гуногун

паҳноии 375pxAa 16px
паҳноии 908pxAa 24px
паҳноии 1440pxAa 32px

clamp(min, preferred, max) қимматро мутобиқи паҳноии экран равон танзим карда, дар ҳадди ақал ва аксар қуфл мекунад. Он якчанд media query-ро барои андозаи ҳарф, фосила ва паҳноӣ бо як сатр иваз мекунад.

Чӣ тавр он кор мекунад

Ин абзор қимматҳои CSS clamp()-ро бо формулаи интерполясияи хаттии дастнавис ҳисоб мекунад — на китобхона, на давраи сервер. Ду андоза ва ду бари намоишро ворид мекунед; математика фавран дар браузери шумо кор карда, ифодаи clamp()-и барои часпонидан омодаро бо қиммати афзалиятноки бар пойаи vw тавлид мекунад, ки навъ ё фосилаи шуморо ҳамвор дар байни он нуқтаҳои канорӣ миқёс мекунад.

  1. 1
    Ҳисоби нишеби хаттӣ
    Абзор нишеби пиксел-ба-пикселро ҳисоб мекунад: (андозаи_макс - андозаи_мин) / (бари_намоиши_макс - бари_намоиши_мин). Ин нишеб сипас бо зарб кардан ба 100 ба воҳиди vw табдил дода мешавад, ки асли миқёси марбут-ба-намоиши CSS-ро ташкил медиҳад.
  2. 2
    Ба даст овардани интерсепт
    Гузаришти интерсепт (бо px ё rem) ҳисоб карда мешавад, то функсияи хаттӣ дар бари намоиши ҳадди ақал дуруст ба андозаи ҳадди ақали шумо расад. Якҷоя, нишеб ва интерсепт қиммати афзалиятнокро дар дохили clamp() месозанд — қисме ки воқеан миқёс мекунад.
  3. 3
    Табдили воҳид ва форматбандии натиҷа
    Агар натиҷаи rem-ро интихоб кунед, ҳар қиммати пиксел пеш аз навишта шудан ба сатри clamp() ба андозаи шрифти решаи танзимшудаи шумо (пешфарз 16px) тақсим карда мешавад. Синфи мувофиқи қиммати дилхоҳи Tailwind низ тавлид мешавад, ки дар он фосилаҳо мутобиқи синтаксиси Tailwind бо зерхат иваз карда мешаванд.
  4. 4
    Пешнамоиши зиндаи лағжонаки намоиш
    Лағжонаки диапазон имкон медиҳад, ки аз 320px то 1920px ба паҳно ҳаракат кунед. Дар ҳар мавқеъ ҳамон формулаи нишеб-ва-интерсепт андозаи маҳдудшударо дар вақти воқеӣ баҳогузорӣ карда, матни намунавиро дар он андозаи ҳисобшудаи пиксел тасвир мекунад, бинобар ин рафтори миқёсро пеш аз нусхабардории чизе мебинед.

Абзорҳои марбут

🟦

Тавлидгари шабакаи CSS

Шабакаи CSS-ро ба таври намоён тарҳрезӣ кунед — трекҳо, воҳидҳо ва фосилаҳо — ва CSS ва HTML тавлидшударо нусхабардорӣ кунед.

Кӯшиш кунед
✍️

Созандаи имзо

Имзоро бо муш, ангушт ё калами электронӣ бикашед, ё номи худро бо шрифти дастхат нависед, сипас онро ҳамчун PNG ё SVG-и шаффоф содир кунед.

Кӯшиш кунед
📐

Табдилдиҳандаи пиксел ба REM

Байни px, rem, em, pt, vw, vh ва % бо андозаи ҳарфи асосии танзимшаванда табдил диҳед. Ҷадвали истинодӣ барои андозаҳои маъмули пиксел дар бар мегирад.

Кӯшиш кунед

Саволҳои зуд-зуд додашаванда