CSS clamp() գեներատոր անվճար
Ստեղծեք հոսուն CSS clamp() արժեք ռեսպոնսիվ տպագրության ու բացատի: Սահմանեք նվազ/մեծ չափ ու viewport տիրույթ, տեսեք ուղիղ նախադիտում ու պատճենեք մեկ տողի CSS:
Ցուցադրվող չափ տարբեր viewport-ներում
clamp(min, preferred, max)-ն արժեքը սահուն մասշտաբավորում է viewport-ի հետ, ապա ամրագրում նվազ. և առավ. արժեքներով: Այն փոխարինում է մեդիա-հարցումների շղթաները տիպոգրաֆիայի, բացատների և լայնությունների համար մեկ տողով:
Տարածված կիրառություններ
- Create Fluid Responsive TypographyՍահուն մասշտաբավորեք տառաչափերը բջջայինի և աշխատասեղանի միջև մեկ տողով։
- Fluid Margins և PaddingMake section spacing grow հետ the viewport instead of jumping միջ breakpoints:
- Replace Media Queries հետ clamp()Collapse stacks of breakpoint overrides միջ a single fluid value:
- Build Fluid Type ScaleGenerate consistent clamp() steps համար a design-system type scale:
- Fluid Hero և Display HeadingsԴարձրեք landing էջի մեծ վերնագրերը դրամատիկ, բայց անվտանգ մասշտաբվող։
Ինչպես է այն աշխատում
Այս գործիքը հաշվարկում է CSS clamp() արժեքները՝ օգտագործելով ձեռագիր գծային ինտերպոլացիայի բանաձև — ոչ մի գրադարան, ոչ մի սերվերային ուղևորություն։ Դուք մուտքագրում եք երկու չափ և երկու տեսադաշտի լայնություն. մաթեմատիկան ակնթարթորեն աշխատում է ձեր դիտարկիչում և արտադրում է պատրաստ-փակցնելու clamp() արտահայտություն՝ vw-հիմքով նախընտրելի արժեքով, որը հարթ մասշտաբավորում է ձեր տառատեսակը կամ բացատագրումը այդ կետերի միջև։
- 1Գծային թեքության հաշվարկԳործիքը հաշվարկում է պիքսել-ըստ-պիքսելի թեքություն. (maxSize - minSize) / (maxViewport - minViewport)։ Այս թեքությունն ապա փոխարկվում է vw միավորների՝ 100-ով բազմապատկելով, ինչը CSS տեսադաշտ-հարաբերական մասշտաբավորման հիմքն է։
- 2Հատման կետի բխեցումՀատման կետի շեղումը (px կամ rem-ով) հաշվարկվում է, որպեսզի գծային ֆունկցիան ուղիղ հասնի ձեր նվազագույն չափին նվազագույն տեսադաշտում։ Միասին թեքությունը և հատման կետը կազմում են clamp()-ի ներսում նախընտրելի արժեքը — մասը, որն իրականում մասշտաբավորվում է։
- 3Միավորների փոխարկում և ելքի ձևաչափումԵթե ընտրում եք rem ելք, ամեն պիքսելային արժեք բաժանվում է ձեր կարգավորված արմատային տառատեսակի չափի վրա (կանխադրված 16px), մինչև clamp() տողում գրվելը։ Համապատասխան Tailwind կամայական-արժեքով դաս նույնպես արտադրվում է, բացատներով փոխարինված ընդգծումներով՝ ըստ Tailwind-ի շարահյուսության։
- 4Կենդանի տեսադաշտի սահիչի նախադիտումՏիրույթի սահիչը թույլ է տալիս սահել 320px-ից 1920px լայնություն։ Յուրաքանչյուր դիրքում նույն թեքության-և-հատման-կետի բանաձևը իրական ժամանակում գնահատում է սահմանափակված չափը և ցուցադրում է նմուշային տեքստ այդ հաշվարկված պիքսելային չափով, որպեսզի կարողանաք տեսնել մասշտաբավորման վարքագիծը՝ մինչև որևէ բան պատճենելը։
Առնչվող գործիքներ
CSS Grid Գեներատոր
Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:
Որքա՞ն է իմ էկրանի թույլտվությունը
Տեսեք ձեր էկրանի թույլտվությունը CSS և իրական փիքսելներով, պատուհանի չափը, փիքսելների հարաբերակցությունը, գույնի խորությունը, HDR-ը, հպման աջակցությունը և թարմացման հաճախականությունը, և պատճենեք այդ ամենը:
Ստորագրության Ստեղծիչ
Նկարեք ստորագրություն ձեր մկնիկով, մատով կամ գրիչով, կամ մուտքագրեք ձեր անունը ձեռագիր տառատեսակով, ապա արտահանեք որպես թափանցիկ PNG կամ SVG։