ነፃ CSS clamp() ፈጣሪ
ለተስማሚ typography እና ክፍተት ፈሳሽ CSS clamp() እሴት ይፍጠሩ። ዝቅተኛ/ከፍተኛ መጠንና viewport ክልል ያዘጋጁ፣ ቀጥታ ቅድመ-እይታ ይመልከቱና አንድ-መስመር CSS ይቅዱ።
በተለያዩ viewportዎች የተፈጠረ መጠን
clamp(min, preferred, max) አንድን ዋጋ ከviewport ጋር በተስማሚ ሁኔታ ያሰፋል፣ ከዚያም በዝቅተኛ እና ከፍተኛ ደረጃ ይቆልፋል። ለታይፖግራፊ፣ ክፍተት እና ስፋት የmedia query ክምችቶችን በአንድ መስመር ይተካል።
እንዴት እንደሚሠራ
ይህ መሣሪያ የCSS clamp() እሴቶችን በእጅ በተጻፈ መስመራዊ የመሀል ግምት ቀመር ያሰላል — ምንም ላይብረሪ፣ ምንም የአገልጋይ ምልልስ የለም። ሁለት መጠኖችን እና ሁለት የማያ ገጽ ስፋቶችን ያስገባሉ፤ ሒሳቡ ወዲያውኑ በአሳሽዎ ውስጥ ይሠራል እና ፊደላትዎን ወይም ክፍተትዎን በእነዚያ የመቀየሪያ ነጥቦች መካከል በለስላሳ የሚያሳድግ በvw ላይ የተመሠረተ ተመራጭ እሴት ያለው፣ ለመለጠፍ ዝግጁ የሆነ clamp() አገላለጽ ያመርታል።
- 1የመስመራዊ ተዳፋት ስሌትመሣሪያው የፒክሰል-በፒክሰል ተዳፋት ያሰላል፦ (maxSize - minSize) / (maxViewport - minViewport)። ይህ ተዳፋት በ100 በማባዛት ወደ vw አሃዶች ይቀየራል፤ ይህም የCSS ከማያ ገጽ ጋር የሚለካ ማሳደግ የሚሠራበት ዋናው መንገድ ነው።
- 2የመነሻ ነጥብ ማግኘትመስመራዊው ተግባር በዝቅተኛው የማያ ገጽ ስፋት ላይ በትክክል ዝቅተኛውን መጠንዎን እንዲመታ የመነሻ ማካካሻ (በpx ወይም rem) ይሰላል። ተዳፋቱ እና መነሻው አንድ ላይ በclamp() ውስጥ ያለውን ተመራጭ እሴት ይፈጥራሉ — በእርግጥ የሚያድገውን ክፍል።
- 3የአሃድ መቀየር እና የውጤት ቅርጸትየrem ውጤትን ከመረጡ፣ እያንዳንዱ የፒክሰል እሴት ወደ clamp() ሕብረቁምፊ ከመጻፉ በፊት ባዘጋጁት የሥር ፊደል መጠን (ነባሪ 16px) ይካፈላል። ተዛማጅ የTailwind የዘፈቀደ-እሴት ክፍልም ይፈጠራል፤ በTailwind አገባብ መሠረት ክፍተቶች በሥር-ሰረዝ ይተካሉ።
- 4የቀጥታ የማያ ገጽ ስፋት ተንሸራታች ቅድመ-እይታየክልል ተንሸራታች ከ320px እስከ 1920px ስፋት ድረስ እንዲያንቀሳቅሱ ያስችልዎታል። በእያንዳንዱ ቦታ ተመሳሳዩ የተዳፋት-እና-መነሻ ቀመር የተገደበውን መጠን ወዲያውኑ ያሰላል እና ናሙና ጽሑፍን በዚያ የተሰላ የፒክሰል መጠን ያሳያል፤ ስለዚህ ምንም ነገር ከመቅዳትዎ በፊት የማሳደጉን ባህሪ ማየት ይችላሉ።
ተዛማጅ መሳሪያዎች
የCSS ግሪድ መፍጠሪያ
CSS ግሪድን በእይታ ይንደፉ — ትራኮች፣ አሃዶች እና ክፍተቶች — እና የተፈጠረውን CSS እና HTML ይቅዱ።
የፊርማ ፈጣሪ
በአይጥዎ፣ በጣትዎ፣ ወይም በስታይለስ ፊርማ ይሳሉ፣ ወይም ስምዎን በእጅ ጽሁፍ ፎንት ይጻፉ፣ ከዚያ እንደ ግልጽ PNG ወይም SVG ላኩት።
ፒክሰል ወደ REM መቀየሪያ
በpx፣ rem፣ em፣ pt፣ vw፣ vh እና % መካከል ከሚስተካከል መሰረታዊ የፊደል መጠን ጋር ይቀይሩ። ለተለመዱ ፒክሰል መጠኖች የማጣቀሻ ሠንጠረዥ ያካትታል።