இலவச பிக்சல் முதல் REM மாற்றி

இது எவ்வாறு செயல்படுகிறது

அனைத்து மாற்றங்களும் பூஜ்ய-சார்பு கையால் எழுதிய கணித இயந்திரம் மூலம் முழுவதும் உங்கள் உலாவியில் இயங்குகின்றன. கருவி ஏழு CSS அலகுகளுக்கு (px, rem, em, pt, vw, vh, %) இடையே மாற்றுகிறது; ஒவ்வொரு கணக்கீட்டையும் pixels ஐப் பொது அடிப்படையாகக் கொண்டு, நீங்கள் அமைத்த root font அளவு, parent font அளவு அல்லது viewport பரிமாணங்களுக்கு எதிராக எளிய வகுத்தல் அல்லது பெருக்கலைப் பயன்படுத்துகிறது.

1. 1
   உங்கள் சூழல் மதிப்புகளை அமைக்கவும்

   மாற்றும் முன், சார்பு CSS அலகுகளுக்கு அர்த்தம் தரும் நான்கு எண்களை அமைக்கிறீர்கள்: root font அளவு (இயல்புநிலை 16px, உலாவியின் இயல்புநிலை), parent உறுப்பு font அளவு (em, % மாற்றங்களுக்கு), viewport அகலம் மற்றும் உயரம் (vw, vh க்கு). இயக்க நேரத்தில் CSS ஐத் தீர்க்கும்போது உங்கள் உலாவி பயன்படுத்தும் அதே மதிப்புகள் இவை.
2. 2
   உலகளாவிய இடைநிலையாக pixel

   மாற்றி முதலில் toPixels() ஐ அழைத்து உங்கள் உள்ளீட்டை மூல pixel எண்ணிக்கைக்கு இயல்பாக்குகிறது — எ.கா., 1.5rem என்பது 1.5 × baseFontPx ஆகும், 50vw என்பது 0.5 × vpWidth ஆகும். பின் fromPixels() அந்த pixel எண்ணிக்கையை இலக்கு அலகுக்கான பொருத்தமான காரணியால் வகுக்கிறது. ஏழு அலகுகளும் மாற்ற அட்டவணையில் ஒரே நேரத்தில் காட்டப்படுகின்றன.
3. 3
   அருகிலுள்ள Tailwind token தேடல்

   மாற்றிய பின், கருவி rem மதிப்பைக் கணக்கிட்டு இரண்டு நிலையான தேடல் அட்டவணைகளை ஸ்கேன் செய்கிறது — Tailwind இன் பதின்மூன்று font-size tokens (text-xs முதல் text-9xl வரை) மற்றும் அதன் spacing அளவுகோல் — முழுமையான தூரத்தால் மிக நெருக்கமான பொருத்தத்தைக் கண்டறிகிறது. = குறி மதிப்பு சரியான token என்பதையும், ≈ மிக அருகிலுள்ள தோராயத்தையும் குறிக்கிறது.
4. 4
   regex வழியாக மொத்த CSS மாற்றி எழுதுதல்

   paste-CSS பலகம் மூல CSS உரையை ஏற்று regex மாற்றீட்டைப் பயன்படுத்துகிறது: px→rem பயன்முறையில் ஒவ்வொரு px token ஐயும் பொருத்தி எண் பகுதியை value/baseFontPx + rem ஆக மாற்றுகிறது; rem→px பயன்முறையில் நேர்மாறாகச் செய்கிறது. எத்தனை மதிப்புகள் மாற்றப்பட்டன எனச் சரிபார்க்க மாற்றீட்டு எண்ணிக்கை காட்டப்படுகிறது.

தொடர்புடைய கருவிகள்