Ինչ է անում CSS clamp() հաշվիչը
«CSS clamp() հաշվիչ» գործիքը հաշվարկում է CSS clamp() ֆունկցիայի արժեքը, որը թույլ է տալիս տարրի չափսին սահուն կերպով փոփոխվել նվազագույն և առավելագույն սահմանների միջև՝ կախված էկրանի տարբեր լայնություններից: Օգտատերը տրամադրում է չափսեր փոքր էկրանի և մեծ էկրանի համար, իսկ գործիքը գեներացնում է համապատասխան clamp() ֆունկցիան:
Այս ֆունկցիան երաշխավորում է, որ տարրի չափսը երբեք չի նվազի փոքր էկրանի համար սահմանված չափից և չի գերազանցի մեծ էկրանի համար նախատեսված առավելագույն չափը՝ միջակայքում մասշտաբավորվելով սահուն ու դինամիկ կերպով: Գեներացված արժեքը կարող է կիրառվել երկարության տարբեր հատկությունների համար, ինչպիսիք են տառատեսակի չափսը (font size), ներքին լուսանցքները (padding), արտաքին լուսանցքները (margin), տարրերի միջև հեռավորությունը (gap), ինչպես նաև լայնությունը (width) կամ բարձրությունը (height):
Գործիքի մուտքային տվյալները
Ճշգրիտ դինամիկ արժեք ստանալու համար անհրաժեշտ է լրացնել հետևյալ մուտքային դաշտերը, որտեղ գործիքն ակնկալում է վավեր թվեր: Յուրաքանչյուր դաշտում պետք է մուտքագրվի վավեր թիվ.
- Նվազագույն Չափս: Թիվ, որը ներկայացնում է ցանկալի չափսը փոքր էկրանի լայնության դեպքում:
- Նվազագույն Էկրանի լայնությունը: Փոքր էկրանի լայնությունը ներկայացնող թիվ:
- Առավելագույն Չափս: Թիվ, որը ներկայացնում է ցանկալի չափսը մեծ էկրանի լայնության դեպքում:
- Առավելագույն Էկրանի լայնությունը: Մեծ էկրանի լայնությունը ներկայացնող թիվ:
- Արմատային տառատեսակի չափը: Թիվ, որն օգտագործվում է պիքսելներով ներկայացված մուտքային արժեքները
remմիավորի փոխարկելու համար:
Թեև չափի միավորը նախատեսված չէ որպես առանձին մուտքային դաշտ, հաշվիչն ինքնաշխատ կերպով փոխակերպում է պիքսելային մուտքերը rem արժեքների՝ հիմնվելով նշված արմատային տառատեսակի չափի վրա:
Ելքային արժեքներ և նախադիտում
Հաշվարկի արդյունքում գործիքը տրամադրում է հետևյալ տվյալները.
- clamp() արժեքը: Գեներացված CSS
clamp()ֆունկցիան (օրինակ՝clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)): Սահմանների արժեքները ներկայացվում ենrem-ով, իսկ փոփոխվող մեջտեղի մասը պահպանում էremբաղադրիչը: - Նախադիտում: Չափսերի փոփոխության տեսողական պատկերումը: Այն կարող է ցուցադրվել որպես «Տեքստ» (օրինակ՝ «Դինամիկ տեքստ՝ կատարյալ չափսերով:») կամ որպես «Տուփ»:
- Նախադիտման լայնությունը: Նախադիտման տիրույթի ընթացիկ լայնության թվային արտացոլումը:
Կախված մուտքագրված տվյալներից և էկրանի ընթացիկ վիճակից՝ հաշվիչը ցուցադրում է հետևյալ կարգավիճակի հաղորդագրությունները.
- «Կարգավորե՛ք չափերը և էկրանի լայնությունները՝ արժեքը ձևավորելու համար:»
- «Հակադարձ մասշտաբավորում. չափը փոքրանում է, երբ էկրանը մեծանում է:»
- «Երկու չափերն էլ հավասար են, ուստի սա ֆիքսված արժեք է, ոչ թե դինամիկ:»
- «պահվում է նվազագույնի վրա»
- «պահվում է առավելագույնի վրա»
- «փոփոխվում է դինամիկ»
Կանոններ և սահմանային դեպքեր
Հաշվիչի ճիշտ աշխատանքի համար գործում են որոշակի կանոններ և սահմանափակումներ.
- Վավեր թվեր: Յուրաքանչյուր դաշտում պետք է մուտքագրվի վավեր թիվ:
- Էկրանի լայնությունների հարաբերակցությունը: Փոքր էկրանի լայնությունը պետք է լինի ավելի փոքր դրական թիվ, քան մեծ էկրանինը: Եթե այս պայմանը չի պահպանվում, ապա
clamp()արժեքի դաշտում կցուցադրվի—նշանը, և կհայտնվի հետևյալ սխալը. «Փոքր էկրանի լայնությունը պետք է լինի ավելի փոքր դրական թիվ, քան մեծ էկրանինը:»: - Հավասար չափսեր: Եթե նվազագույն և առավելագույն չափսերը համընկնում են, արդյունքը վերածվում է սովորական ֆիքսված երկարության:
- Միավորների փոխակերպում: Գործիքը փոխակերպում է պիքսելային արժեքները
rem-ի՝ օգտագործելով տրամադրված արմատային տառատեսակի չափը: Գեներացվածclamp()արժեքի սահմանները և փոփոխվող միջին մասը պահպանում ենremբաղադրիչը: Սա երաշխավորում է, որ տեքստը կշարունակի մեծանալ, երբ օգտատերը մեծացնում է բրաուզերի մասշտաբը (zoom) կամ փոխում է համակարգի լռելյայն տառատեսակի չափը:
Ում համար է նախատեսված այս գործիքը
Այս հաշվիչը օգտակար է նրանց համար, ովքեր.
- Նախագծում են հարմարվողական (responsive) վեբ էջեր:
- Ցանկանում են ստեղծել դինամիկ տառատեսակներ (fluid typography), որոնք սահուն կերպով փոփոխվում են էկրանի չափսին զուգընթաց:
- Կիրառում են հարմարվողական տարածություններ (padding, margin, gap), որոնք համապատասխանում են տարբեր էկրանների լայնություններին:
- Ցանկանում են ապահովել վեբ հասանելիություն (accessibility)՝ թույլ տալով տեքստին մեծանալ, երբ օգտատերերը փոխում են բրաուզերի լռելյայն տառատեսակի չափը կամ օգտագործում են մասշտաբավորում:
Գաղտնիություն և տվյալների մշակում
Այս գործիքից օգտվելիս Ձեր տվյալների անվտանգությունն ամբողջությամբ պահպանվում է: Հաշվարկն ամբողջությամբ կատարվում է Ձեր բրաուզերում: Ձեր մուտքագրած տվյալներից ոչինչ չի վերբեռնվում BroBroGo:
Հաճախ տրվող հարցեր (FAQ)
Ինչպե՞ս է հաշվիչը կառուցում clamp() արժեքը:
Դուք տալիս եք երկու կետ՝ չափը փոքր էկրանի լայնության դեպքում և չափը մեծ էկրանի լայնության դեպքում. Հաշվիչը գծում է ուղիղ գիծ դրանց միջև, որպեսզի չափը սահուն աճի էկրանի լայնացմանը զուգընթաց, այնուհետև այն փաթաթում է clamp() ֆունկցիայի մեջ, որպեսզի այն երբեք չնվազի Ձեր սահմանած նվազագույնից և չգերազանցի առավելագույնը. Այս երկու լայնությունների միջև չափը փոփոխվում է դինամիկ կերպով, իսկ դրանցից դուրս՝ պահպանում է համապատասխան սահմանային արժեքը.
Ինչո՞ւ է արդյունքը տրվում rem-ով և vw-ով՝ պիքսելների փոխարեն:
Սահմանները տրվում են rem-ով, իսկ փոփոխվող միջին մասը պահպանում է rem բաղադրիչը, որպեսզի տեքստը դեռ մեծանա, երբ ընթերցողը մեծացնում է մասշտաբը կամ փոխում բրաուզերի լռելյայն տառատեսակի չափը. միայն պիքսելներով կամ viewport-ով արժեքները կարող են խոչընդոտել դրան. Դուք մուտքագրում եք չափերը պիքսելներով, քանի որ դա ավելի սովորական է, իսկ գործիքը փոխարկում է rem-ի՝ հիմնվելով արմատային տառատեսակի չափի վրա.
Կարո՞ղ եմ սա օգտագործել տարածությունների (spacing), և ոչ միայն տառատեսակի չափի համար:
Այո՛. Նույն արժեքը կարող է աշխատել padding-ի, margin-ի, gap-ի, լայնության (width) կամ բարձրության (height) համար՝ ցանկացած տեղ, որտեղ օգտագործվում է երկարություն. Փոխե՛ք նախադիտումը «Տուփ» (Box) ռեժիմի՝ տեսնելու համար, թե ինչպես է մեծանում տարածությունը տեքստի փոխարեն. Եթե Ձեր նվազագույն և առավելագույն չափերը նույնն են, արդյունքը կվերածվի սովորական ֆիքսված երկարության, քանի որ մասշտաբավորելու կարիք չկա.
Արդյո՞ք բոլոր բրաուզերներն աջակցում են clamp() ֆունկցիան:
Այո՛, բոլոր ժամանակակից բրաուզերներն աջակցում են clamp() ֆունկցիան սկսած 2020 թվականից, ուստի կարող եք օգտագործել այս արժեքն առանց այլընտրանքային տարբերակների (fallback). Շատ մեծ առավելագույն արժեքների կամ արագ փոփոխության դեպքում խորհուրդ է տրվում արագ ստուգել 200% մասշտաբով, որ տեքստը դեռևս մեծանա այն ընթերցողների համար, ովքեր ունեն դրա կարիքը.