የCSS clamp() ካልኩሌተር
ለአነስተኛ እና ትላልቅ ስክሪኖች መጠን ያስገቡ እና በመካከላቸው በተለዋዋጭ ሁኔታ የሚያድግ የclamp() እሴት ያግኙ — ለጽሑፍ መጠኖች፣ padding፣ margins ወይም gaps።
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)ውጤቱ በመካከለኛው ክፍል ላይ የrem እሴትን ይይዛል፣ ስለዚህ አንድ ሰው ወደ 200% ቢያሳንስም ጽሑፉ አሁንም ያድጋል — viewport-only እሴት ቢሆን ኖሮ ግን አያድግም ነበር።
ተለዋዋጭ ጽሑፍ፣ በትክክለኛው መጠን።
ስሌቱ ሙሉ በሙሉ የሚከናወነው በብሮውዘርዎ ላይ ነው። እዚህ የሚያስገቡት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
በተደጋጋሚ የሚነሱ ጥያቄዎች
ካልኩሌተሩ የclamp() እሴቱን እንዴት ይገነባል?
ሁለት ነጥቦችን ይሰጡታል፡ በትንሽ ስክሪን ስፋት ላይ ያለ መጠን እና በትልቅ ስክሪን ስፋት ላይ ያለ መጠን። በሁለቱ መካከል ቀጥተኛ መስመር ይስላል፣ በዚህም ስክሪኑ ሲሰፋ መጠኑም በተመጣጣኝ ሁኔታ ያድጋል፤ ከዚያም በclamp() ውስጥ ይጠቀልለዋል፣ በዚህም ከትንሹ ስክሪን መጠን በታች እንዳይወርድ ወይም ከትልቁ ስክሪን መጠን በላይ እንዳይወጣ ያደርገዋል። በሁለቱ ስፋቶች መካከል መጠኑ በተለዋዋጭ ሁኔታ ያድጋል፤ ከእነሱ ውጭ ግን በቅርብ ገደብ ላይ ይቆማል።
ለምን ውጤቱ በፒክሰል ፋንታ በrem እና vw ሆነ?
ወሰኖቹ በrem ሲሆኑ ተለዋዋጭው መካከለኛ ክፍል ደግሞ የrem አካልን ይይዛል፤ ስለዚህ አንባቢው ሲያጎላ ወይም የብሮውዘሩን ነባሪ የጽሑፍ መጠን ሲጨምር ጽሑፉ አሁንም ያድጋል — በፒክሰል ወይም በviewport ብቻ የተገደበ እሴት ቢሆን ኖሮ ግን ይህ እንዳይሰራ ሊያግደው ይችል ነበር። መጠኖቹን በፒክሰል የሚጽፉት አብዛኛው ሰው ስለሚረዳው ሲሆን፣ መሳሪያው ግን የእርስዎን root font size በመጠቀም ወደ rem ይቀይረዋል።
ይህንን ለጽሑፍ መጠን ብቻ ሳይሆን ለክፍተቶችም (spacing) መጠቀም እችላለሁ?
አዎ። ያው እሴት ለpadding, margin, gap, width ወይም height — ርዝመት በሚያስፈልግበት በማንኛውም ቦታ ይሰራል። ከጽሑፍ ይልቅ የቦታው መጠን ሲያድግ ለማየት ቅድመ-ዕይታውን ወደ Box ይቀይሩት። ትንሹ እና ትልቁ መጠኖችዎ እኩል ከሆኑ፣ የሚለካ ነገር ስለሌለ ውጤቱ ወደ ተራ ቋሚ ርዝመት ይቀየራል።
ሁሉም ብሮውዘሮች clamp()ን ይደግፋሉ?
አዎ — ከ2020 ጀምሮ እያንዳንዱ ዘመናዊ ብሮውዘር clamp()ን ይደግፋል፣ ስለዚህ ያለምንም አማራጭ (fallback) እሴቱን መጠቀም ይችላሉ። በጣም በትልቅ ከፍተኛ መጠን ወይም ፈጣን የለውጥ ፍጥነት ላይ፣ ጽሑፉ ለሚያስፈልጋቸው አንባቢዎች አሁንም ማደጉን በ200% ማጉላት (zoom) ማረጋገጥ ይመረጣል።