Je, ninazalishaje CSS clamp() kwa saizi ya fonti inayobadilika?

Ingiza Ukubwa wa chini (px), Ukubwa wa juu (px), Viewport ya chini (px) na Viewport ya juu (px). Zana hii inatoa Thamani ya CSS iliyo tayari kunakiliwa, kama vile clamp(1rem, ..., 2rem), yenye thamani inayopendelewa ya vw kati ya saizi zako mbili.

Je, nichague matokeo ya rem au px?

Tumia kiteuzi cha Kitengo cha matokeo. Ukiwa na rem, thamani za pikseli zitagawanywa kwa Saizi ya font ya mzizi (px), chaguo-msingi 16, ili maandishi yafuate mpangilio wa fonti ya kivinjari cha mtumiaji. Matokeo ya pikseli yanatoa thamani za px zisizobadilika.

Je, inanipa klasi ya Tailwind?

Ndiyo. Chini ya thamani ya CSS kuna klasi ya Tailwind, katika muundo wa text-[clamp(...)], na nafasi zikibadilishwa na mistari ya chini. Nakili kwa kitufe chake cha Nakili. Inatumia kiambishi awali cha text-, kwa hivyo hariri hicho kwa sifa nyingine.

Kwa nini inaonya kuwa ukubwa wangu wa juu ni mkubwa sana?

Wakati ukubwa wa juu ni zaidi ya mara 2.5 ya ukubwa wa chini, notisi ya ufikiaji inaonekana: maandishi yaliyovutwa huenda yasifikie asilimia 200 ya ukubwa wake (WCAG 1.4.4). Weka ukubwa wa juu kuwa au chini ya mara 2.5 ya ukubwa wa chini.

Je, ninawezaje kuhakiki matokeo kabla ya kuyatumia?

Buruta kitelezi cha uhakiki kwenye viewport yoyote kutoka 320 hadi 1920 px. Maandishi ya mfano na ukubwa wake wa pikseli uliokokotwa utasasishwa moja kwa moja, na saizi pia zitaonyeshwa kwenye viewport ya chini, ya kati na ya juu.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

📐

Jenereta ya CSS clamp() bila malipo

Tengeneza thamani ya CSS clamp() ya mtiririko kwa fonti na nafasi inayojibu. Weka ukubwa wa chini/juu na mbalimbali wa eneo la kuona, uone mwonekano wa moja kwa moja, na nakili CSS ya mstari mmoja.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

Ukubwa wa chini (px)

Ukubwa wa juu (px)

Viewport ya chini (px)

Viewport ya juu (px)

Kitengo cha pato:

Saizi ya font ya mzizi (px)

Thamani ya CSS

font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);

Klasi ya Tailwind

text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]

Buruta kubadilisha njiani yoyote768px upana → 21.9px

Aa 22px

Ukubwa ulioonyeshwa katika viewport tofauti

375px upanaAa 16px

908px upanaAa 24px

1440px upanaAa 32px

clamp(min, preferred, max) hurekebisha thamani kwa ulaini na viewport, kisha inafunga kwa chini na juu. Inabadilisha safu za media queries kwa tipografia, nafasi, na upana kwa mstari mmoja.

Matumizi ya kawaida

Tengeneza Tipogarafia Inayolingana na KioevuUpimaji wa ukubwa wa fonti kwa kuyumba kati ya simu na kompyuta na mstari mmoja.
Nafasi ya Maji na PaddiKukamatia nafasi ya sehemu kuinua na viewport badala ya kumkuza kwa breakpoints.
Badilisha Maombi ya Mitambo na clamp()Kunyamazisha rafu za somo la breakpoint hadi thamani ya tafsiri moja.
Tengeneza Kiwango cha Aina ya KioevuTengeneza hatua za clamp() inayolingana kwa kiwango cha aina ya mfumo wa kuandika.
Sanamu na Mitanzi ya KuonyeshaKukamatia kichwa cha ukurasa mkubwa kuweka jukumu katika kina lakini salama.

Jinsi Inavyofanya Kazi

Kifaa hiki kinahesabu thamani za CSS clamp() kwa kutumia fomula ya uwiano wa mstari iliyoandikwa mwenyewe — hakuna maktaba, hakuna mizunguko ya seva. Unaweka ukubwa mbili na upana mbili wa dirisha; hesabu inafanyika papo hapo kwenye kivinjari chako na kutoa usemi wa clamp() tayari-kubandika wenye thamani ya kawaida ya msingi-wa-vw inayobadilisha ukubwa wa fonti au nafasi yako kwa laini kati ya mipaka hiyo.

1
Hesabu ya mteremko wa mstari
Kifaa kinahesabu mteremko wa pikseli-kwa-pikseli: (maxSize - minSize) / (maxViewport - minViewport). Mteremko huu kisha unabadilishwa kuwa vipimo vya vw kwa kuzidisha kwa 100, ambayo ndiyo kiini cha jinsi upimaji wa CSS unaohusiana na dirisha unavyofanya kazi.
2
Utokanaji wa intercept
Nyongeza ya intercept (kwa px au rem) inahesabiwa ili kazi ya mstari ipige kwa usahihi ukubwa wako wa chini kabisa kwenye dirisha la chini kabisa. Kwa pamoja, mteremko na intercept zinaunda thamani ya kawaida ndani ya clamp() — sehemu inayobadilika kikweli.
3
Ubadilishaji wa kipimo na upangaji wa matokeo
Ukichagua matokeo ya rem, kila thamani ya pikseli inagawanywa na ukubwa wa fonti ya mzizi uliopangwa (chaguo-msingi px 16) kabla ya kuandikwa kwenye mfuatano wa clamp(). Klasi inayolingana ya thamani-huru ya Tailwind pia inazalishwa, ikiwa na nafasi zilizobadilishwa na mistari ya chini kulingana na sintaksia ya Tailwind.
4
Onyesho la moja kwa moja la kitelezi cha dirisha
Kitelezi cha wigo kinakuruhusu kusogeza kutoka px 320 hadi px 1920 kwa upana. Kwenye kila nafasi fomula ile ile ya mteremko-na-intercept inahesabu ukubwa uliofungwa papo hapo na kuonyesha maandishi ya mfano kwa ukubwa huo wa pikseli uliohesabiwa, kwa hiyo unaweza kuona tabia ya kubadilika kabla ya kunakili chochote.

Zana Zinazohusiana

🟦

Kitengenezea CSS Grid

Zungu CSS grid — tracks, vitengo na pengo — na kunakili CSS na HTML iliyozalishwa.

Jaribu

📐

Ubora wa Skrini Yangu ni Gani

Ona ubora wa skrini yako katika pikseli za CSS na halisi, ukubwa wa dirisha, uwiano wa pikseli, kina cha rangi, HDR, usaidizi wa kugusa na kiwango cha uonyeshaji upya, na unakili yote.

Jaribu

Inayopendwa

✍️

Kitengenezea Sahihi

Chora sahihi kwa kipanya, kidole, au kalamu maalum, au andika jina lako kwa fonti ya mwandiko, kisha itoe kama PNG au SVG ya uwazi.

Jaribu

Jenereta ya CSS clamp() bila malipo

Matumizi ya kawaida

Jinsi Inavyofanya Kazi

Zana Zinazohusiana

Kitengenezea CSS Grid

Ubora wa Skrini Yangu ni Gani

Kitengenezea Sahihi

Maswali Yanayoulizwa Mara Kwa Mara