නොමිලේ Pixel සිට REM පරිවර්තකය
සකසනු ලැබිය හැකි පාදක font ප්රමාණයක් සමඟ px, rem, em, pt, vw, vh සහ % අතර පරිවර්තනය කරන්න. සාමාන්ය pixel ප්රමාණ සඳහා සොයා බැලීමේ වගුවක් ඇතුළත් ය.
සන්දර්භය (rem/em/vw/vh/%-ට බලපායි)
ඉතාසම Tailwind ටෝකන (16px root වල)
සාමාන්ය පික්සල් ප්රමාණ → rem (16px පාදකය)
නිබන්ධ කරන ලද CSS පරිවර්තනය කරන්න
පොදු භාවිත
- වෙබ් සංවර්ධනය සඳහා PX to REMපික්සල අගයන් ස්කේලබල, ප්රවේශ්ය CSS සඳහා rem ඒකක සඳහා පරිවර්තනය කරන්න. ඔබගේ ස්ථාපනීය ෆොන්ට් ප්රමාණ සකස් කරන්න සහ වහාම සියලු සමාන අගයන් බලන්න.
- ප්රතිචාරාත්මක සැලසුම් සඳහා CSS ඒකකවිවිධ තිර ප්රමාණ සහ දිශානති වලට නිවැරදිව ප්රතිචාර දක්වන පිරිසැලසුම් ගොඩනැගීමට px, vw, vh සහ % අතර පරිවර්තනය කරන්න.
- නිර්මාණ ගුණ CSS ඒකක සඳහා පරිවර්තනය කරන්නපිරිසිදු, පරිමාණය කළ හැකි CSS ක්රියාත්මක කිරීම සඳහා Figma හෝ Sketch pixel අගයන් rem/em ඒකක වලට පරිවර්තනය කරන්න.
- Tailwind CSS ඒකක යොමුවනිවැරදි ක්රියාවලිය සඳහා Tailwind CSS ප්රමාණ පන්තිවල පික්සල සහ rem අගයන් සමඟ නිර්ණයිතයි කිරුම තේරුම් ගන්න.
- මුද්රණ stylesheets සඳහා CSS ඒකක පරිවර්තනය කරන්නමුද්රණ මාධ්ය සිතුවම් සහ PDF ප්රතිදිගුවේ CSS සඳහා px, pt සහ rem අතර පරිවර්තනය කරන්න.
එය ක්රියා කරන්නේ කෙසේද
සියලුම පරිවර්තන කිසිදු යැපීමකින් තොරව අතින් ලියන ලද අංක ගණිත එන්ජිමක් භාවිතයෙන් සම්පූර්ණයෙන්ම ඔබේ බ්රවුසරයේ ධාවනය වේ. මෙවලම CSS ඒකක හතක් (px, rem, em, pt, vw, vh, සහ %) අතර පරිවර්තනය කරන්නේ සෑම ගණනයක්ම පොදු පාදකයක් ලෙස pixels හරහා යවා, ඔබේ වින්යාසගත root font ප්රමාණය, parent font ප්රමාණය, හෝ viewport මානයන්ට එරෙහිව සරල බෙදීමක් හෝ ගුණ කිරීමක් යොදමිනි.
- 1ඔබේ සන්දර්භ අගයන් සකසන්නපරිවර්තනයට පෙර, සාපේක්ෂ CSS ඒකක අර්ථවත් කරන අංක හතර ඔබ වින්යාස කරයි: root font ප්රමාණය (පෙරනිමි 16px, බ්රවුසර පෙරනිමිය), parent element font ප්රමාණය (em සහ % පරිවර්තන සඳහා), සහ viewport පළල සහ උස (vw සහ vh සඳහා). මේවා ඔබේ බ්රවුසරය ධාවන කාලයේ CSS විසඳීමට භාවිතා කරන එකම අගයන් වේ.
- 2සර්වත්රික අතරමැදියා ලෙස Pixelපරිවර්තකය මුලින්ම toPixels() ඇමතීමෙන් ඔබේ ආදානය රෝ pixel ගණනකට සාමාන්යකරණය කරයි — උදාහරණයක් ලෙස, 1.5rem, 1.5 × baseFontPx බවට පත් වන අතර, 50vw 0.5 × vpWidth බවට පත්වේ. පසුව fromPixels() ඉලක්ක ඒකකය සඳහා අදාළ සාධකයෙන් එම pixel ගණන බෙදයි. ඒකක හතම පරිවර්තන වගුවේ එකවර පෙන්වයි.
- 3ආසන්නතම Tailwind ටෝකන් සෙවීමපරිවර්තනයෙන් පසු, මෙවලම rem අගය ගණනය කර හාඩ්කෝඩ් කළ සෙවුම් වගු දෙකක් — Tailwind හි font-size ටෝකන් දහතුනක් (text-xs සිට text-9xl දක්වා) සහ එහි ඉඩ පරිමාණය — නිරපේක්ෂ දුරින් ආසන්නතම ගැලපුම සොයමින් scan කරයි. = ලකුණක් අර්ථවත් වන්නේ අගය නිශ්චිත ටෝකනයක් බවයි; ≈ එය ආසන්නතම ආසන්නීකරණයක් බව අර්ථවත් කරයි.
- 4regex හරහා කණ්ඩායම් CSS ප්රතිලිවීමpaste-CSS පැනලය රෝ CSS පෙළ පිළිගෙන regex ආදේශනයක් යොදයි: px→rem ප්රකාරයේදී එය සෑම px ටෝකනයකටම ගැලපී සංඛ්යාත්මක කොටස value/baseFontPx + rem සමඟ ප්රතිස්ථාපනය කරයි; rem→px ප්රකාරයේදී එය ප්රතිලෝම කරයි. කීයක් නැවත ලියනු ලැබුවේද යන්න තහවුරු කරගැනීමට ආදේශන ගණන පෙන්වයි.
සම්බන්ධ මෙවලම්
ඒකක පරිවර්තකය
දිග, බර, උෂ්ණත්වය, ක්ෂේත්රඵලය, ප්රමාණය, සහ තවත් ඒකක අතර පරිවර්තනය කරන්න.
CSS clamp() සකසන්නා
Responsive typography සහ spacing සඳහා fluid CSS clamp() අගය සාදන්න. Min/max ප්රමාණය සහ viewport පරාසය සකසන්න, සජීව preview බලන්න, single-line CSS copy paste කරන්න.
CSS ග්රිඩ් උත්පාදකය
CSS grid ඉතිරිවීමින් නිර්මාණ කරන්න — tracks, units සහ gaps — සහ generated CSS සහ HTML පිටපත් කරන්න।