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