📐
ነፃ ፒክሰል ወደ REM መቀየሪያ
በpx፣ rem፣ em፣ pt፣ vw፣ vh እና % መካከል ከሚስተካከል መሰረታዊ የፊደል መጠን ጋር ይቀይሩ። ለተለመዱ ፒክሰል መጠኖች የማጣቀሻ ሠንጠረዥ ያካትታል።
ከተጫነ በኋላ ከመስመር ውጭ ይሠራል
1rem
አውድ (rem/em/vw/vh/%ን ይነካል)
ለ16 px ሁሉም ልወጣዎች
ቅርብ የTailwind ቶክኖች (በ16px root)
የተለመዱ የፒክሰል መጠኖች → rem (በ16px base)
የተለጠፈ CSS ቀይር
እንዴት እንደሚሠራ
ሁሉም መቀየሪያዎች ሙሉ በሙሉ በአሳሽዎ ውስጥ ምንም ጥገኝነት በሌለው በእጅ በተጻፈ የሒሳብ ሞተር ይሠራሉ። መሣሪያው በሰባት የCSS አሃዶች (px፣ rem፣ em፣ pt፣ vw፣ vh እና %) መካከል እያንዳንዱን ስሌት በፒክሰሎች እንደ የጋራ መሠረት በማሳለፍ ይቀይራል፤ ባዘጋጁት የሥር ፊደል መጠን፣ የወላጅ ፊደል መጠን ወይም የማያ ገጽ ልኬቶች ቀላል ክፍፍል ወይም ማባዛት ይተገብራል።
- 1የአውድ እሴቶችዎን ያዘጋጁከመቀየርዎ በፊት አንጻራዊ የCSS አሃዶችን ትርጉም ያላቸው የሚያደርጉትን አራት ቁጥሮች ያዋቅራሉ፦ የሥር ፊደል መጠን (ነባሪ 16px፣ የአሳሹ ነባሪ)፣ የወላጅ አካል ፊደል መጠን (ለem እና ለ% መቀየሪያዎች) እና የማያ ገጽ ስፋት እና ቁመት (ለvw እና ለvh)። እነዚህ አሳሽዎ CSSን በሚሠራበት ጊዜ የሚጠቀምባቸው ተመሳሳይ እሴቶች ናቸው።
- 2ፒክሰል እንደ ሁለንተናዊ መካከለኛመቀየሪያው መጀመሪያ ግቤትዎን ወደ ጥሬ የፒክሰል ብዛት ለማስተካከል toPixels()ን ይጠራል — ለምሳሌ 1.5rem 1.5 × baseFontPx፣ 50vw ደግሞ 0.5 × vpWidth ይሆናል። ከዚያም fromPixels() ያንን የፒክሰል ብዛት ለዒላማው አሃድ በተገቢው ብዜት ይካፍላል። ሰባቱም አሃዶች በመቀየሪያ ሰንጠረዡ ውስጥ በአንድ ጊዜ ይታያሉ።
- 3ቅርቡን የTailwind ቶከን መፈለግከመቀየሩ በኋላ መሣሪያው የremን እሴት ያሰላል እና ሁለት ቋሚ የማጣቀሻ ሰንጠረዦችን ይቃኛል — የTailwind አሥራ ሦስት የፊደል መጠን ቶከኖች (ከtext-xs እስከ text-9xl) እና የክፍተት ልኬቱ — በፍጹም ርቀት ቅርቡን ተዛማጅ ያገኛል። የ= ምልክት እሴቱ ትክክለኛ ቶከን መሆኑን ያሳያል፤ ≈ ደግሞ ቅርቡ ግምት መሆኑን።
- 4በregex የCSS በጅምላ እንደገና መጻፍየCSS መለጠፊያ ፓነሉ ጥሬ የCSS ጽሑፍ ይቀበላል እና የregex መተካት ይተገብራል፦ በpx→rem ሁነታ እያንዳንዱን የpx ቶከን ያዛምዳል እና የቁጥሩን ክፍል በvalue/baseFontPx + rem ይተካል፤ በrem→px ሁነታ ተቃራኒውን ያደርጋል። ስንት እሴቶች እንደገና እንደተጻፉ ማረጋገጥ እንዲችሉ የመተኪያ ብዛቱ ይታያል።