rem-ஐ px ஆக மாற்றுதல் Root em ↔ Pixels இலவசம் ஆன்லைன் பாதுகாப்பு

rem ஐ px ஆக ஏன் மாற்ற வேண்டும்

நீங்கள் ஒரு நடைத்தாளைத் திறந்து ஒரு அட்டையில் padding: 2.25rem என்பதையும் ஒரு தலைப்புக் குறிப்பில் font-size: 0.8125rem என்பதையும் காண்கிறீர்கள். அவை நல்ல மதிப்புகள், நவீன CSS எழுதப்பட வேண்டிய விதத்தில் எழுதப்பட்டவை, ஆனால் ஒரு பார்வையில் அவை உங்களுக்கு எதுவும் சொல்வதில்லை. திரையில் அந்த அட்டையின் உள்ளிடம் எவ்வளவு பெரியது? தலைப்புக் குறிப்பு படிக்கக்கூடியதாக இருக்குமா? உங்களிடம் கொடுக்கப்பட்ட வடிவமைப்புக் கோப்பிலுள்ள 36 px, 13 px உடன் அது பொருந்துகிறதா? விடையளிக்க, நீங்கள் rem ஐ px ஆக மாற்றுகிறீர்கள்: வேர் எழுத்துரு அளவால் பெருக்கி, வடிவமைப்புக் கருவிகள் பயன்படுத்தும் அலகில் விடையைப் படிக்கிறீர்கள். இது வழக்கமான திசையின் தலைகீழ், நீங்கள் குறியீட்டைப் படிக்கும்போது, ஒரு மாதிரியை ஒரு கட்டமைப்புடன் சரிபார்க்கும்போது, அல்லது பிக்சல்களில் சிந்திக்கும் ஒருவருக்கு ஓர் அமைப்பை விளக்கும்போது நீங்கள் செய்வது இதுவே.

மாற்றம் எளிது; அதை ஒரு பக்கத்துக்குத் தகுதியாக்குவது அடிப்படை. ஒரு rem என்பது ஓர் அளவு அல்ல, அது ஓர் அளவின், வேர் உறுப்பின் எழுத்துரு அளவின், பல மடங்கு. வேறாகச் சொல்லப்படாத ஓர் உலாவியில் அந்த அளவு 16 px, எனவே 1 rem என்பது 16 px, 2.25 rem என்பது 36 px, 0.8125 rem என்பது 13 px. ஆனால் நடைத்தாளால் வேரை மாற்றலாம், வாசகர் உலாவியில் அதை மாற்றலாம், அப்போது பக்கத்திலுள்ள ஒவ்வொரு rem மதிப்பும் அதனுடன் நகர்கிறது. எனவே பக்கம் அடிப்படையை மறைப்பதற்குப் பதிலாக அதைக் கேட்டுப் பயன்படுத்துகிறது.

கணக்கீடு உங்கள் உலாவியில் நடக்கிறது, எதுவும் பதிவேற்றப்படுவதில்லை. கீழே சூத்திரம், பொதுவான மதிப்புகளின் அட்டவணை, மாற்றம் எதை வைத்திருக்கிறது, எதை வைத்திருக்க முடியாது, உருவாக்குநர்கள் rem ஐ px ஆக மாற்ற வேண்டிய சூழ்நிலைகள், rem அடிப்படையிலான நடைத்தாளைப் படிக்க எளிதாக வைத்திருக்கும் சில பழக்கங்கள் ஆகியவற்றைக் காண்பீர்கள்.

சூத்திரமும் அடிப்படையும்

px என்பது rem பெருக்கல் அடிப்படை

சூத்திரம் ஒரு பெருக்கல்: px = rem × base. வழக்கமான 16 px அடிப்படையுடன், 1.5 rem என்பது 24 px ஆகிறது, 0.75 rem என்பது 12 px, 4 rem என்பது 64 px. பக்கம் முடிவுக்கு அருகில் அடிப்படையை அச்சிடுகிறது, எனவே 1.5 rem = 24 px (16 px) போன்ற ஒரு வரி எது கருதப்பட்டது என்று சொல்கிறது, அது உங்கள் திட்டத்துடன் பொருந்துகிறதா என்று உடனே காணலாம்.

உங்கள் அடிப்படையைக் கண்டறிதல்

font-size ஐ அமைக்கும் html அல்லது :root மீதான ஒரு விதிக்கு நடைத்தாளில் பாருங்கள். எதுவும் இல்லையென்றால், அடிப்படை உலாவியின் இயல்பான 16 px. ஒன்று இருந்தால், 62.5% போல, 16 இன் அந்த விழுக்காட்டை எடுங்கள்: 62.5% என்பது 10 px தருகிறது. உலாவியின் உருவாக்குநர் கருவிகளில் வேர் உறுப்பைத் தேர்ந்தெடுத்து அதன் கணக்கிடப்பட்ட எழுத்துரு அளவையும் படிக்கலாம், அடிப்படைப் புலத்தில் தட்டச்சு செய்ய வேண்டிய எண் அதுவே.

வேர் அளவு நீர்ம நிலையில் இருக்கும்போது

சில தளங்கள் clamp வெளிப்பாட்டைப் பயன்படுத்தி வேர் அளவைச் சாளரத்துடன் வளரச் செய்கின்றன. அப்போது 1 rem க்கு ஒற்றைப் பிக்சல் மதிப்பே இல்லை: அது தொலைபேசியில் 15 px, அகலத் திரையில் 18 px. அந்த நிலையில் எந்த மாற்றமும் ஒரு நொடிப்படம். நீங்கள் கவலைப்படும் அகலத்தில் காணும் அடிப்படையைத் தட்டச்சு செய்யுங்கள், விடை அந்த அகலத்தில் மட்டுமே செல்லுபடியாகும் என்று புரிந்துகொள்ளுங்கள்.

மாற்றம் எதை வைத்திருக்கிறது, எதை வைத்திருக்க முடியாது

அது விகிதத்தை வைத்திருக்கிறது

ஒரு rem என்பது வேர் எழுத்துரு அளவு எதுவோ அதுவே, எனவே rem இல் எழுதப்பட்ட ஓர் அமைப்பு அந்த அளவு மாறும்போது தன் வடிவத்தை வைத்திருக்கிறது. நீங்கள் rem ஐ px ஆக மாற்றும்போது, பிக்சல் மதிப்பு ஒரு குறிப்பிட்ட அடிப்படைக்காக உறுதியாக்கப்பட்ட அதே விகிதம். இரு அளவுகளுக்கு இடையிலான விகிதம், எடுத்துக்காட்டாக 1 rem உரைக்கு மேல் 2 rem தலைப்பு, நீங்கள் எப்படி மாற்றினாலும் மாறுவதில்லை, அந்த விகிதமே ஒரு நல்ல அமைப்பு சார்ந்திருக்கும் விஷயம்.

அது உங்கள் வாசகரின் அமைப்புகளை அறிய முடியாது

எண் முழுவதுமாக அடிப்படையைச் சார்ந்தது. வாசகர் தங்கள் உலாவியின் இயல்பு உரை அளவை உயர்த்தியிருந்தால், பலர் செய்கிறார்கள், அதற்கு உரிமையும் உண்டு, அப்போது அவர்களுக்கு 1 rem என்பது 16 px அல்ல, நீங்கள் காணும் எண் புலத்திலுள்ள அடிப்படைக்கு மட்டுமே சரி. பிக்சல் மதிப்பை வடிவமைப்பைப் புரிந்துகொள்ளும் ஒரு வழியாகக் கருதுங்கள், ஒவ்வொரு பார்வையாளரும் காண்பதற்கான வாக்குறுதியாக அல்ல.

சுற்றுதல்

அடிப்படை பொதுவாக ஒரு முழு எண் என்பதால், பெருக்கலின் முடிவு பொதுவாகத் துல்லியமானது. 16 அடிப்படையில் 0.8125 rem சரியாக 13 px; 0.6875 rem சரியாக 11 px. நீங்கள் ஒரு நீண்ட தசமத்தைப் பெற்றால், rem மதிப்பு நீங்கள் தட்டச்சு செய்ததிலிருந்து வேறு அடிப்படையிலிருந்து கணக்கிடப்பட்டது என்பதற்கான அடையாளம்.

பொதுவான மதிப்புகள்

பக்கத்தின் அடிப்பகுதியில் அட்டவணை

நீங்கள் அமைத்த அடிப்படையில் பொதுவான rem எண்கள் ஒத்திருக்கும் பிக்சல் மதிப்புகளின் ஓர் அட்டவணையைப் பக்கம் கொண்டுள்ளது: 0.5 rem என்பது 8 px, 0.625 என்பது 10, 0.75 என்பது 12, 0.875 என்பது 14, 1 என்பது 16, 1.125 என்பது 18, 1.25 என்பது 20, 1.5 என்பது 24, 2 என்பது 32, 3 என்பது 48, 4 என்பது 64. இவை இடைவெளி, எழுத்து அளவுகோல்களில் மிக அடிக்கடி தோன்றும் மதிப்புகள், அவற்றை மனப்பாடமாக அறிவது ஒரு நடைத்தாளை ஒரு பார்வையில் படிக்கக்கூடியதாக்குகிறது.

ஒரு நடைத்தாளைப் பிக்சல்களில் படித்தல்

நீங்கள் எழுதாத ஒரு நடைத்தாளை எடுத்து அதன் முக்கிய மதிப்புகளை ஒருமுறை பிக்சல்களாக மொழிபெயர்த்து, முடிவுகளை ஒரு குறிப்பில் எழுதுவது ஒரு பயனுள்ள பயிற்சி. 1 rem உடல் அளவு, 1.5, 2.25 rem தலைப்புகள், 2 rem கொள்கலன் இடைவெளி: பிக்சல்களில், 16, 24, 36, 32. இப்படிப் பார்த்தால், வடிவமைப்பின் தர்க்கம் தோன்றுகிறது, கணிப்பான் இல்லாமல் அதை வடிவமைப்புக் கோப்புடன் ஒப்பிடலாம்.

இங்கே rem ஐ px ஆக மாற்றுவது எப்படி

rem மதிப்பைத் தட்டச்சு செய்யுங்கள்

முதல் புலத்தில் rem இல் அளவை உள்ளிடுங்கள். தசமங்கள் ஏற்கப்படுகின்றன, எனவே 0.8125 உம் 1 ஐப் போலவே வேலை செய்கிறது.

அடிப்படையை அமையுங்கள்

உங்கள் CSS வேர் அளவை மாற்றவில்லை என்றால் அதை 16 இல் விடுங்கள். மாற்றினால், மாற்றுங்கள். நீங்கள் தட்டச்சு செய்யும்போது முடிவு புதுப்பிக்கப்படுகிறது.

பிக்சல் மதிப்பைப் படியுங்கள்

விடை உடனே தோன்றுகிறது, அதன் அருகில் அடிப்படை காட்டப்படுகிறது, அதனால் எது கருதப்பட்டது என்று சொல்லலாம். அதை உங்கள் குறிப்புகளில் நகலெடுங்கள் அல்லது வடிவமைப்புக் கோப்புடன் ஒப்பிடுங்கள்.

இந்த அலகுகள் எங்கிருந்து வருகின்றன

CSS பிக்சல்

காட்சிகளுக்கு முன்கணிக்கக்கூடிய அடர்த்தி இல்லாமல் போனபோது, உண்மைப் பிக்சல்களில் அளக்கப்பட்ட ஒரு பக்கம் திரைகள் கூர்மையாகும்போது சுருங்கும் பக்கமாக ஆனது. எனவே CSS பிக்சல் ஒரு குறிப்பு நீளமாக மறுவரையறுக்கப்பட்டது: வசதியான வாசிப்புத் தொலைவில் பார்க்கப்படும் ஓர் அங்குலத்தின் ஏறக்குறைய 1/96. எனவே ஒரு நடைத்தாளிலுள்ள பிக்சல் உங்கள் திரையிலுள்ள ஒரு புள்ளி அல்ல, திரைக்குத் தேவையான அளவு புள்ளிகளுக்கு உலாவி பொருத்தும் ஒரு நீள அலகு.

rem

em இணையத்தைவிடப் பழமையானது: உலோக அச்செழுத்தில் அது வார்ப்புத் தொகுதியின் அகலம், பெரிய M எழுத்தின் பெயரால் அழைக்கப்பட்டது, CSS இல் அது நடைமுறையிலுள்ள எழுத்துரு அளவு என்று பொருள்படுகிறது, அதனால்தான் நீங்கள் உறுப்புகளைக் கூடுகட்டும்போது அது மாறுகிறது. rem சரியாக அதைத் தவிர்க்கச் சேர்க்கப்பட்டது: அது வேர் உறுப்பின் em, ஒருபோதும் கூடுவதில்லை. எண்களில் வேறுபாட்டைக் காண, px ஐ em ஆக மாற்றி, rem ஐ px ஆக மாற்றும்போது கிடைப்பதுடன் ஒப்பிடுங்கள்.

உருவாக்குநர்கள் rem ஐ px ஆக மாற்றும்போது

ஒரு கட்டமைப்பை வடிவமைப்புக் கோப்புக்கு எதிராகச் சரிபார்த்தல்

ஒரு வடிவமைப்பாளர் பிக்சல்களில் ஒரு கோப்பைக் கையளிக்கிறார்; உருவாக்குநர் குறியீட்டை rem இல் எழுதினார். பக்கம் பொருந்துகிறதா என்று சரிபார்க்க, அவர்கள் rem ஐ px ஆக மாற்றி எண்களை ஒப்பிடுகிறார்கள். பொருத்தமின்மை உடனே தெரிகிறது: 1.375 rem என்பது 22 px, வடிவமைப்பு 24 என்று சொன்னால், அவற்றில் ஒன்று தவறு.

பழகாத குறியீட்டைப் படித்தல்

நீங்கள் ஒரு நடைத்தாளைப் பெறும்போது, rem மதிப்புகள் உண்மை அளவுகளை மறைக்கின்றன. முக்கியமானவற்றில் ஒரு சிலவற்றை மாற்றுவது வடிவமைப்பின் ஒரு வரைபடத்தைத் தருகிறது: எழுத்து எவ்வளவு பெரியது, இடைவெளிப் பட்டைகள் எவ்வளவு அகலம், முறிவுப் புள்ளிகள் எங்கே விழுகின்றன.

பிழை அறிக்கைகளையும் ஆவணங்களையும் எழுதுதல்

ஒரு பக்கத்தைச் சோதிப்பவர்கள் தாங்கள் காண்பதைப் பிக்சல்களில் விவரிக்கிறார்கள். உள்ளிடம் 2.5 rem என்று சொல்லும் ஓர் உருவாக்குநர் ஒரு சோதனையாளருக்குக் குறைவாகவே சொல்கிறார்; 40 px ஏதோ பொருள் தருகிறது. மாற்றுவது இரு தரப்பினரும் ஒருவரையொருவர் புரிந்துகொள்ள வைக்கிறது.

பிக்சல்களில் துல்லியமாக இருக்க வேண்டிய மதிப்புகளை அமைத்தல்

சில விஷயங்கள் சாதனப் பிக்சல்களின் ஒரு துல்லியமான எண்ணிக்கையாக இருக்க வேண்டும், இல்லையெனில் மென்மையாகத் தெரியும்: ஒரு பிக்சல் விளிம்பு, ஒரு 24 px கட்டத்தில் வரையப்பட்ட ஐகான். ஓர் அளவு பிக்சல் கட்டத்தில் விழ வேண்டுமென்றால், rem ஐ px ஆக மாற்றுவது உங்கள் அடிப்படையில் அது விழுகிறதா என்று சொல்கிறது.

rem ஐ px ஆக மாற்றும்போது பொறிகள்

மாற்றப்பட்ட வேர் அளவை மறத்தல்

வேர் 62.5% ஆகவோ clamp வெளிப்பாட்டுக்கோ அமைக்கப்பட்டிருந்தால், 16 என்ற நிலையான காரணி பொருந்தாது. முடிவு இரு அடிப்படைகளின் விகிதத்தால் தவறாகிறது. எப்போதும் முதலில் அடிப்படையைச் சரிபாருங்கள்.

rem ஐ em உடன் குழப்புதல்

em என்பது வேருக்கு அல்லாமல் உறுப்பின் சொந்த எழுத்துரு அளவுக்குச் சார்புடையது. 24 px தலைப்புக்குள் 1.5em மதிப்பு 36 px, ஆனால் 16 px பத்திக்குள் அது 24 px. இந்தப் பக்கம் rem ஐ மாற்றுகிறது, அதற்கு அத்தகைய தெளிவின்மை இல்லை. em க்கு, em ஐ px ஆக மாற்றுதல் பாருங்கள்.

திரை அதே பிக்சல்களைக் காட்டுகிறது என்று அனுமானித்தல்

ஒரு CSS பிக்சல் சாதனப் பிக்சல் அல்ல. உயர் அடர்த்திக் காட்சியில் ஒரு CSS பிக்சல் இரண்டு அல்லது மூன்று சாதனப் பிக்சல்களாக இருக்கலாம். மாற்றம் CSS பிக்சல்களைத் தருகிறது, வடிவமைப்புக் கருவிகளும் நடைத்தாளும் இரண்டும் பயன்படுத்துவது அதையே.

மிக முன்னதாகச் சுற்றுதல்

நீங்கள் 13.333 px ஐ 13 ஆகச் சுற்றி, பிறகு திரும்ப மாற்றினால், நீங்கள் தொடங்கிய 0.8333 அல்ல, 0.8125 rem பெறுவீர்கள். அது முக்கியமாக இருக்கும்போது மூல rem மதிப்பை வைத்திருங்கள்.

மாற்றுவதற்கு முன் மக்கள் கேட்கும் கேள்விகள்

1 rem என்பது எத்தனை பிக்சல்கள்?

இயல்பு மாற்றப்படாத உலாவியில், பதினாறு.

2 rem என்பது எத்தனை பிக்சல்கள்?

இயல்பு அடிப்படையில் முப்பத்திரண்டு. 10 அடிப்படையில் அது 20 ஆக இருக்கும்.

என் உலாவி ஏன் வேறொன்றைக் காட்டுகிறது?

வாசகரின் அமைப்பு அல்லது நடைத்தாளிலுள்ள ஒரு விதி வேர் அளவை மாற்றியுள்ளது. உருவாக்குநர் கருவிகளில் வேர் உறுப்பின் கணக்கிடப்பட்ட எழுத்துரு அளவைப் பாருங்கள்.

rem என்பது em போலவே ஒன்றா?

இல்லை. rem வேர் உறுப்பைக் குறிக்கிறது, em உறுப்பையே குறிக்கிறது.

என் எண் பதிவேற்றப்படுகிறதா?

இல்லை. கணக்கீடு உங்கள் உலாவியில் நடக்கிறது, எதுவும் எங்கும் அனுப்பப்படுவதில்லை.

நான் திரும்பிச் செல்வது எப்படி?

px ஐ rem ஆக மாற்றுதல் உடன், அது பெருக்குவதற்குப் பதிலாக வகுக்கிறது.

rem நடைத்தாளைப் படிக்க எளிதாக்கும் பழக்கங்கள்

பிக்சல் மதிப்பை ஒரு குறிப்புரையில் எழுதுங்கள்

gap: 1.5rem; /* 24px */ போன்ற ஒரு வரி சில எழுத்துகள் செலவாகிறது, அடுத்த வாசகருக்கு ஒரு மாற்றத்தைச் சேமிக்கிறது. நீங்கள் கருதிய அடிப்படையையும் அது பதிவு செய்கிறது.

ஒரு சிறிய அளவுகோலைப் பயன்படுத்துங்கள்

0.5, 1, 1.5, 2, 3 போன்ற ஒரு சில rem மதிப்புகளை மட்டுமே பயன்படுத்தும் ஒரு திட்டம் கற்க எளிது: ஒரு நாளுக்குப் பிறகு அவற்றைச் சிந்திக்காமலே பிக்சல்களில் அறிவீர்கள். அத்தகைய நடைத்தாளுக்கு நீங்கள் rem ஐ px ஆக மாற்றும்போது நீங்கள் நினைவில் வைத்திருப்பதை உறுதிப்படுத்துகிறீர்கள் மட்டுமே.

உங்கள் மதிப்புகளுக்குப் பெயரிடுங்கள்

--space-md: 1.5rem போன்ற தனிப்பயன் பண்புகளுடன், நடைத்தாள் எண்களுக்குப் பதிலாக நோக்கத்தை விவரிக்கிறது. பெயர் பொருளைச் சுமக்கிறது, எண் ஒரே இடத்தில் அமர்கிறது.

வேறு இயல்பு அளவுடன் சோதியுங்கள்

உங்கள் உலாவியில் இயல்பு உரை அளவை உயர்த்தி பக்கத்தைப் பாருங்கள். அது ஒன்றாக இருந்தால், அமைப்பு உண்மையிலேயே rem இல் கட்டப்பட்டுள்ளது. அது உடைந்தால், ஏதோ பிக்சல்களில் விடப்பட்டுள்ளது.

rem ஐ px ஆக மாற்றிய பிறகு பிக்சல் மதிப்பை நன்றாகப் பயன்படுத்துதல்

எண்களை மட்டுமல்ல, விகிதங்களையும் ஒப்பிடுங்கள்

நீங்கள் ஒரு முழு நடைத்தாளுக்கு rem ஐ px ஆக மாற்றும்போது, அளவுகளைப் பார்ப்பதுடன் அவற்றுக்கிடையிலான விகிதங்களையும் பாருங்கள். ஒவ்வொரு படியும் முந்தையதன் ஏறக்குறைய 1.25 மடங்காக இருக்கும் ஓர் எழுத்து அளவுகோல் 16, 20, 25, 31, 39 பிக்சல்களைத் தருகிறது; 1.5 அளவுகோல் 16, 24, 36, 54 ஐத் தருகிறது. விகிதத்தைக் கண்டறிவது வடிவமைப்பாளர் எண்ணியதைச் சொல்கிறது, உங்களுக்கு ஒரு புதிய அளவு தேவைப்படும்போது அளவுகோலை ஒரே சீராக நீட்டிக்க உதவுகிறது.

பிக்சல்களில் சிந்திப்பவர்களுக்காக மொழிபெயருங்கள்

ஒரு குழுவில் எல்லோரும் rem ஐப் படிப்பதில்லை. திட்ட மேலாளர்கள், நகல் எழுத்தாளர்கள், வாடிக்கையாளர்கள் அடிக்கடி திரைப்பிடிப்புகளிலிருந்து வேலை செய்து ஒரு தலைப்பைச் சற்றுப் பெரிதாக்கும்படி கேட்கிறார்கள். தலைப்பு இப்போது 36 px, 2.5 rem இல் 40 px ஆக இருக்கும் என்று உங்களால் சொல்ல முடிந்தால், உரையாடல் குறுகியது. இரு சொற்களஞ்சியங்களுக்கு இடையிலான ஒரு விரைவுப் பாலமாகப் பக்கம் பயன்படுகிறது.

தொடு இலக்குகளையும் குறைந்தபட்ச அளவுகளையும் சரிபாருங்கள்

தொடுதிரைகளுக்கான வழிகாட்டுதல்கள் குறைந்தது ஏறக்குறைய 44 px இலக்குகளைக் கேட்கின்றன, உரைக்கான வழிகாட்டுதல்கள் ஏறக்குறைய 16 px அல்லது அதற்கு மேற்பட்ட உடல் நகலைக் கேட்கின்றன. இரண்டும் பிக்சல்களில் கூறப்பட்டுள்ளன. rem இல் எழுதப்பட்ட ஒரு நடைத்தாளை அவற்றுக்கு எதிராகச் சரிபார்க்க, rem ஐ px ஆக மாற்றி, பொத்தான்களும் உரையும் கோட்டைத் தாண்டுகின்றனவா என்று பாருங்கள்.

பெரிதாக்கிய நிலையைக் கவனியுங்கள்

நீங்கள் பெறும் மதிப்பு நீங்கள் தட்டச்சு செய்த அடிப்படைக்கானது. உங்கள் வாசகர்கள் உரையைப் பெரிதாக்கலாம் என்றால், 20 அல்லது 24 அடிப்படையுடன் மாற்றத்தை மீண்டும் முயன்று அமைப்பு திரையிடம் என்ன கேட்கிறது என்று பாருங்கள். 16 இல் வசதியான ஓர் அட்டை 24 இல் வழிந்து போகலாம், அதைக் கண்டறிய சிறந்த நேரம் பக்கம் வெளியிடப்படுவதற்கு முன்.

தொடர்புடைய மாற்றிகள்

அதே குடும்பக் கருவிகள் அண்டை மாற்றங்களை உள்ளடக்குகின்றன. rem க்குத் திரும்பச் செல்ல, px ஐ rem ஆக மாற்றுதல் ஐப் பயன்படுத்துங்கள். உறுப்புக்குச் சார்புடைய அளவுகளுக்கு, px ஐ em ஆக மாற்றுதல், em ஐ px ஆக மாற்றுதல் உள்ளன, திரைக்குச் சார்புடைய அளவுகளுக்கு, px ஐ vw ஆக மாற்றுதல், vw ஐ px ஆக மாற்றுதல். அதே நடைத்தாளிலுள்ள வண்ணங்களுக்கு, HEX இலிருந்து RGB க்கு, HSL இலிருந்து HEX க்கு கைவசம் உள்ளன, வகுப்புப் பெயர்களுக்கு, உரையிலிருந்து kebab-case க்கு ஒரு சொற்றொடரை CSS ஏற்கும் பெயராக மாற்றுகிறது.

ஒரு செய்முறை எடுத்துக்காட்டு

நீங்கள் ஒரு pull request ஐ மதிப்பாய்வு செய்கிறீர்கள், நடைத்தாளில் padding: 5rem 1.5rem கொண்ட ஒரு hero பிரிவும் 3.5rem தலைப்பும் 1.25rem முன்னுரைப் பத்தியும் உள்ளன என்று வைத்துக்கொள்ளுங்கள். வடிவமைப்புக் கோப்பு 80 px, 24 px உள்ளிடம், 56 px தலைப்பு, 20 px முன்னுரை என்று சொல்கிறது. நீங்கள் 5 ஐத் தட்டச்சு செய்து 80 px படிக்கிறீர்கள், 1.5 ஐத் தட்டச்சு செய்து 24 படிக்கிறீர்கள், 3.5 ஐத் தட்டச்சு செய்து 56 படிக்கிறீர்கள், 1.25 ஐத் தட்டச்சு செய்து 20 படிக்கிறீர்கள். நான்கும் பொருந்துகின்றன, எனவே கட்டமைப்பு நம்பகமானது. தலைப்பு 3.25 rem ஆக இருந்திருந்தால், நீங்கள் 52 படித்து வடிவமைப்பாளரிடம் செல்லும் முன் வேறுபாட்டைக் கண்டிருப்பீர்கள்.

ஒரு குறுகிய சரிபார்ப்புப் பட்டியல்

மாற்றுவதற்கு முன்

அடிப்படையைக் கண்டறியுங்கள்: நடைத்தாளிலுள்ள வேர் விதி, அல்லது உருவாக்குநர் கருவிகளிலுள்ள கணக்கிடப்பட்ட அளவு.

மாற்றும்போது

rem மதிப்பைத் தட்டச்சு செய்யுங்கள், முடிவுக்கு அருகில் காட்டப்படும் அடிப்படையைச் சரிபாருங்கள், பிக்சல் எண்ணைக் குறித்துக்கொள்ளுங்கள்.

மாற்றிய பிறகு

வடிவமைப்புக் கோப்புடன் ஒப்பிடுங்கள். எண்கள் வேறுபட்டால், குறியீட்டைச் சந்தேகிக்கும் முன் அடிப்படையைச் சரிபாருங்கள்.

பொதுவான தவறுகள்

சரிபார்க்காமல் 16 ஐப் பயன்படுத்துதல்

அது இயல்பு, விதி அல்ல. வேரைச் சரிபாருங்கள்.

பிக்சல்களை இறுதியாகக் கருதுதல்

விடை ஓர் அடிப்படைக்கு மட்டுமே பொருந்தும். பெரிய இயல்பு உள்ள வாசகர் பெரிய பிக்சல்களைக் காண்கிறார்.

rem ஐயும் em ஐயும் குழப்புதல்

அவை ஒன்றுபோலத் தெரிகின்றன, வேறுபட்டு நடந்துகொள்கின்றன. ஒவ்வொன்றுக்கும் சரியான பக்கத்தைப் பயன்படுத்துங்கள்.

உங்கள் எண்கள் உங்கள் சாதனத்திலேயே இருக்கின்றன

கணக்கீடு உள்ளூரிலேயே நடக்கிறது. உங்கள் மதிப்புகள் உங்கள் சொந்த உலாவியால் பயன்படுத்தப்படுகின்றன, எதுவும் எங்கும் அனுப்பப்படுவதில்லை. பின்னர் நீக்க எதுவும் இல்லை, உருவாக்க எந்தக் கணக்கும் இல்லை. rem ஐ px ஆக மாற்றும் எளிய வழி அதுவே.

சுருக்கம்

இங்கே rem ஐ px ஆக மாற்ற, rem இல் அளவைத் தட்டச்சு செய்து px = rem × base என்ற சூத்திரத்தைப் பயன்படுத்தி உடனே பிக்சல்களில் படியுங்கள். அடிப்படை 16 px இல் தொடங்குகிறது, ஓர் உலாவியின் இயல்பு, அதை உங்கள் CSS க்குப் பொருந்த மாற்றலாம். மாற்றம் விகிதத்தை வைத்திருக்கிறது, ஏனெனில் ஒரு rem என்பது வேர் எழுத்துரு அளவு எதுவோ அதுவே, அது உங்கள் வாசகரின் அமைப்புகளை அறிய முடியாது, எனவே எண் புலத்திலுள்ள அடிப்படைக்கு மட்டுமே சரி. 8 px இல் 0.5 rem இலிருந்து 64 px இல் 4 rem வரையிலான பொதுவான மதிப்புகளின் அட்டவணை ஒரு நடைத்தாளை ஒரு பார்வையில் படிக்க உதவுகிறது. எதுவும் பதிவேற்றப்படுவதில்லை.