இந்தக் கருவி என்ன செய்கிறது
இந்தக் கருவி பிக்சல் (px) மதிப்புகளை ரூட் em (rem) மற்றும் em மதிப்புகளாக மாற்றுகிறது, மேலும் தலைகீழாகவும் மாற்றுகிறது. px, rem, em ஆகிய மூன்று அலகுகளில் ஏதேனும் ஒன்றில் நீங்கள் ஒரு மதிப்பை உள்ளிட்டால், மற்ற இரண்டு அலகுகளுக்கான மதிப்புகளையும் கருவி தானாகவே கணக்கிட்டுக் காட்டுகிறது. உங்கள் வடிவமைப்புத் தேவைக்கு ஏற்ப மாற்றங்கள் துல்லியமாக இருக்க, ஒரு தனிப்பயன் ரூட் எழுத்து அளவையும், ஒரு தனிப்பயன் em சூழல் எழுத்து அளவையும் நீங்கள் அமைக்கலாம். எந்தப் புலத்தைத் திருத்தினாலும், நீங்கள் தட்டச்சு செய்யும்போதே மற்ற இரண்டு புலங்களும் புதுப்பிக்கப்படும்.
புலங்களை எப்படிப் பயன்படுத்துவது
பக்கத்தில் மூன்று முக்கியப் புலங்கள் உள்ளன. "ரூட் எழுத்து அளவு (px)" புலம் பக்கத்தின் அடிப்படை எழுத்து அளவைக் குறிக்கிறது; இது rem மாற்றங்களுக்கு அடிப்படையாக இருக்கும். "em சூழல் எழுத்து அளவு (px)" புலம், em மதிப்பு பொருந்தும் உறுப்பின் எழுத்து அளவைக் குறிக்கிறது; em மாற்றங்கள் இதன் அடிப்படையில் கணக்கிடப்படும். "மதிப்புகள்" புலத்தில் px, rem அல்லது em இல் ஒரு நீளத்தை நீங்கள் உள்ளிடலாம். மூன்று புலங்களும் ஒன்றோடொன்று இணைக்கப்பட்டுள்ளன — எந்த ஒரு புலத்தை நீங்கள் மாற்றினாலும், மற்ற இரண்டு புலங்களும் மூன்று அலகுகளிலும் மாற்றப்பட்ட மதிப்புகளைக் காண்பிக்குமாறு உடனடியாக புதுப்பிக்கப்படும். இதுதவிர, 16px அடிப்படை ரூட் எழுத்து அளவைக் கொண்டு பொதுவான பிக்சல் மதிப்புகளை rem ஆக மாற்றிக் காட்டும் ஒரு அட்டவணையும் பக்கத்தில் உள்ளது.
ரூட் எழுத்து அளவு rem மதிப்பை எப்படிப் பாதிக்கிறது
rem மதிப்பு எப்போதும் பக்கத்தின் ரூட் எழுத்து அளவுக்கு எதிராகவே கணக்கிடப்படுகிறது. கருவியில் ரூட் எழுத்து அளவின் இயல்புநிலை மதிப்பு 16px ஆகும், மேலும் தொடக்கத்தில் 16px என்பது 1rem க்கும், 1em க்கும் சமமாக இருக்கும். எடுத்துக்காட்டாக, ரூட் எழுத்து அளவு 16px ஆக இருக்கும்போது, 32px என்ற மதிப்பு 2rem ஆக மாறும் (32 ஐ 16 ஆல் வகுத்தால் கிடைப்பது). உங்கள் திட்டத்தின் CSS-இல் ரூட் எழுத்து அளவு வேறு எண்ணிக்கையில் அமைக்கப்பட்டிருந்தால், "ரூட் எழுத்து அளவு (px)" புலத்தில் அந்த எண்ணை உள்ளிடுங்கள் — உடனே rem மதிப்புகள் அதற்கேற்ப மாறும். ரூட் எழுத்து அளவு எப்போதும் 0 ஐ விடப் பெரிய எண்ணாகவே இருக்க வேண்டும்.
em சூழல் அளவை எப்போது மாற்ற வேண்டும்
em மதிப்பு, அது இருக்கும் உறுப்பின் சொந்த எழுத்து அளவைப் பொறுத்தது — இது எப்போதும் பக்கத்தின் ரூட் எழுத்து அளவைப் போலவே இருக்காது. கருவியில் em சூழல் எழுத்து அளவின் இயல்புநிலை மதிப்பும் 16px ஆகும். உங்கள் உறுப்பின் உண்மையான எழுத்து அளவை "em சூழல் எழுத்து அளவு (px)" புலத்தில் அமைத்தால், அந்த உறுப்புக்குள் em மதிப்புகள் எப்படி வெளிப்படும் என்பதை மிகத் துல்லியமாகக் கணக்கிடலாம். எடுத்துக்காட்டாக, சூழல் எழுத்து அளவு 20px ஆக அமைக்கப்பட்டிருந்தால், 30px என்ற மதிப்பு 1.5em ஆக மாறும் (30 ஐ 20 ஆல் வகுத்தால் கிடைப்பது). em சூழல் எழுத்து அளவும் எப்போதும் 0 ஐ விடப் பெரிய எண்ணாகவே இருக்க வேண்டும்.
எதிர்மறை மதிப்புகள் மற்றும் பிழைச் செய்திகள்
"மதிப்புகள்" புலத்தில் எதிர்மறை பிக்சல் மதிப்புகளையும் நீங்கள் உள்ளிடலாம் — கருவி இதை அனுமதிக்கிறது. இருப்பினும், மூன்று புலங்களிலும் தவறான தரவை உள்ளிட்டால் தெளிவான பிழைச் செய்திகள் தோன்றும். "மதிப்புகள்" புலத்தில் தவறான மதிப்பு உள்ளிட்டால், "மாற்றுவதற்கு ஒரு எண்ணை உள்ளிடவும்." என்ற செய்தி காட்டப்படும். "ரூட் எழுத்து அளவு (px)" புலத்தில் தவறான மதிப்பு உள்ளிட்டால், "ரூட் எழுத்து அளவு 0 ஐ விட பெரிய எண்ணாக இருக்க வேண்டும்." என்ற செய்தி காட்டப்படும். "em சூழல் எழுத்து அளவு (px)" புலத்தில் தவறான மதிப்பு உள்ளிட்டால், "em சூழல் எழுத்து அளவு 0 ஐ விட பெரிய எண்ணாக இருக்க வேண்டும்." என்ற செய்தி காட்டப்படும். இந்தச் செய்திகள் என்ன தவறு நடந்தது என்பதை உடனடியாகக் காட்டுவதால், எந்தப் புலத்தைச் சரிசெய்ய வேண்டும் என்பது உங்களுக்குத் தெளிவாகத் தெரியும்.
இது யாருக்குப் பயனுள்ளதாக இருக்கும்
நிலையான பிக்சல் மதிப்புகளை, பதிலளிக்கக்கூடிய (responsive) வடிவமைப்புக்காக, சார்பு rem அல்லது em அலகுகளாக மாற்ற வேண்டியவர்களுக்கு இந்தக் கருவி பயனுள்ளதாக இருக்கும். வெவ்வேறு ரூட் எழுத்து அளவுகள் rem மதிப்புகளை எப்படிப் பாதிக்கின்றன என்பதைப் புரிந்துகொள்ள விரும்புபவர்களுக்கும், ஒரு குறிப்பிட்ட உறுப்பின் எழுத்து அளவின் அடிப்படையில் em மதிப்புகளைக் கணக்கிட வேண்டியவர்களுக்கும் இது உதவும். ஒரு வாசகர் தனது இயல்புநிலை எழுத்து அளவை மாற்றும்போது, தமது வடிவமைப்பு அதற்கேற்ப சரியாக அளவிடப்பட வேண்டும் என விரும்புபவர்களும் இதைப் பயன்படுத்தலாம்.
தனியுரிமை
ஒவ்வொரு மாற்றமும் உங்கள் உலாவியிலேயே இயங்குகிறது. நீங்கள் தட்டச்சு செய்யும் எதுவும் BroBroGo-விற்கு பதிவேற்றப்படாது.
அடிக்கடி கேட்கப்படும் கேள்விகள்
px, rem, em ஆகிய மூன்று அலகுகளுக்கும் என்ன வேறுபாடு? px என்பது ஒரு நிலையான பிக்சல் மதிப்பாகும். rem, பக்கத்தின் ரூட் எழுத்து அளவுக்கு எதிராகக் கணக்கிடப்படுகிறது; em, அது இருக்கும் உறுப்பின் எழுத்து அளவுக்கு எதிராகக் கணக்கிடப்படுகிறது. இந்தக் கருவியில் இந்த மூன்று மதிப்புகளையும் ஒரே நேரத்தில் காணலாம், மேலும் ஒன்றை மாற்றும்போது மற்ற இரண்டும் தானாகவே புதுப்பிக்கப்படும்.
ரூட் எழுத்து அளவையும் em சூழல் அளவையும் ஏன் தனித்தனியாக அமைக்க வேண்டும்? rem மதிப்புகள் எப்போதும் பக்கத்தின் ரூட் எழுத்து அளவைப் பொறுத்தவை; em மதிப்புகளோ, அவை பயன்படுத்தப்படும் உறுப்பின் சொந்த எழுத்து அளவைப் பொறுத்தவை. இந்த இரண்டும் வெவ்வேறாக இருக்கக்கூடும் என்பதால், கருவி இவற்றை இரண்டு தனிப் புலங்களாகக் கொடுத்து, இரண்டு வகை மாற்றங்களையும் துல்லியமாக்குகிறது.
எதிர்மறை px மதிப்புகளை உள்ளிடலாமா? ஆம். "மதிப்புகள்" புலத்தில் எதிர்மறை பிக்சல் மதிப்புகளை உள்ளிட கருவி அனுமதிக்கிறது.
ரூட் எழுத்து அளவு அல்லது em சூழல் அளவில் தவறான எண் உள்ளிட்டால் என்ன ஆகும்? இரண்டு புலங்களும் 0 ஐ விடப் பெரிய எண்ணாகவே இருக்க வேண்டும். இல்லையெனில், அந்தந்தப் புலத்திற்கு ஏற்ற பிழைச் செய்தி காட்டப்படும் — "ரூட் எழுத்து அளவு 0 ஐ விட பெரிய எண்ணாக இருக்க வேண்டும்." அல்லது "em சூழல் எழுத்து அளவு 0 ஐ விட பெரிய எண்ணாக இருக்க வேண்டும்."