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

நீங்கள் ஏன் px ஐ em ஆக மாற்றுகிறீர்கள்

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

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

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

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

em என்பது px வகு எழுத்துரு அளவு

சூத்திரம் ஒரு வகுத்தல்: em = px ÷ base. 16 px அடிப்படையுடன், 24 px மதிப்பு 1.5 em ஆகிறது, 8 px என்பது 0.5 em, 20 px என்பது 1.25 em. எது கருதப்பட்டது என்று நீங்கள் காணும்படி, 24 px = 1.5 em (16 px) போல, பக்கம் முடிவுக்கு அருகில் அடிப்படையைக் காட்டுகிறது. கணிதம் rem க்குச் சமம். பொருள் வேறு.

அடிப்படை என்றால் என்ன

rem க்கு, அடிப்படை வேர் உறுப்பின் எழுத்துரு அளவு. em க்கு, அது மதிப்பு பயன்படுத்தப்படும் உறுப்பின் எழுத்துரு அளவு, அல்லது font-size பண்புக்கே, பெற்றோரினது. அதனால்தான் em க்கு ஒற்றை விடை இல்லை: அதே நடைத்தாள் மதிப்பு வெவ்வேறு இடங்களில் வெவ்வேறு பிக்சல் அளவுகளைக் குறிக்கிறது. உரை 14 px ஆக உள்ள ஒரு பொத்தானுக்கு ஓர் உள்ளிடத்தை மாற்றினால், அடிப்படையாக 14 ஐத் தட்டச்சு செய்யுங்கள். 32 px தலைப்புக்கு ஓர் ஓரத்தை மாற்றினால், 32 ஐத் தட்டச்சு செய்யுங்கள்.

உங்களுக்குத் தெரியாதபோது இயல்புநிலை

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

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

அது உரையுடனான விகிதத்தை வைத்திருக்கிறது

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

அது பக்கத்துக்கு ஓர் ஒற்றை எண்ணைத் தர முடியாது

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

சுற்றுதல்

16 ஆல் வகுத்தல் பல அளவுகளுக்குத் தூய மதிப்புகளையும் மற்றவற்றுக்குத் திரும்ப வரும் தசமங்களையும் தருகிறது. 0.8125 em போன்ற ஒரு மதிப்பு ஒரு நடைத்தாளில் சரி, ஆனால் சரியான அளவு முக்கியமில்லை என்றால் 0.8 அல்லது 0.85 க்குச் சுற்ற விரும்பலாம். துல்லியம் முக்கியமான இடத்தில் முழு எண்ணை வைத்திருங்கள்.

உள்ளமைவுப் பொறி

em எப்படிக் கூட்டுச்சேர்கிறது

ஒரு பட்டியலுக்கு font-size: 0.875em உள்ளது, அதன் உருப்படிகளுக்கும் font-size: 0.875em உள்ளது என்று வைத்துக்கொள்ளுங்கள். பட்டியல் தன் பெற்றோரின் 87.5%. ஒவ்வோர் உருப்படியும் பட்டியலின் 87.5%, அது பெற்றோரின் ஏறக்குறைய 76.6%. ஓர் உருப்படிக்குள் உள்ளமைந்த ஒரு பட்டியல் மீண்டும் சுருங்கி, ஏறக்குறைய 67% ஆகிறது. மூன்று நிலைகளுக்குப் பிறகு உரை மிகச் சிறியது, யாரும் அதைத் திட்டமிட்டு எழுதவில்லை. em கூட்டுச்சேர்கிறது என்று சொல்வதன் பொருள் இதுவே.

நீங்கள் px ஐ em ஆக மாற்றும்போது அது ஏன் முக்கியம்

font-size க்கு ஒரு பிக்சல் மதிப்பை em ஆக மாற்றினால், நீங்கள் பயன்படுத்த வேண்டிய அடிப்படை உறுப்பின் சொந்தது அல்ல, பெற்றோரின் எழுத்துரு அளவு. பல தவறுகள் தவறானதைப் பயன்படுத்துவதிலிருந்து வருகின்றன. padding, margin போன்ற பிற பண்புகளுக்கு, அடிப்படை உறுப்பின் சொந்த எழுத்துரு அளவு. விதி சொல்ல எளிது, மறக்கவும் எளிது: font-size மேலே பார்க்கிறது, மற்ற எல்லாம் தன்னைப் பார்க்கின்றன.

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

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

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

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

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

உறுப்புடன் பொருந்த அடிப்படையை மாற்றுதல்

ஒரு சிறு பொத்தானுக்கு அடிப்படையை 14 ஆக அமைத்தால், அட்டவணை மாறுகிறது: 14 px இப்போது 1 em, 7 px என்பது 0.5 em, 21 px என்பது 1.5 em. முயன்று பாருங்கள், 1.5 em உள்ளிடம் 14 px பொத்தானில் 18 px பொத்தானைவிட வேறுபட்ட பிக்சல் அளவைக் கொண்டுள்ளது என்பதையும், அது ஏன் பயனுள்ளது என்பதையும் காண்பீர்கள்.

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

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

முதல் புலத்தில் பிக்சல்களில் அளவை உள்ளிடுங்கள். தசமங்கள் ஏற்கப்படுகின்றன.

em குறிக்கும் எழுத்துரு அளவை அமையுங்கள்

உறுப்பின் எழுத்துரு அளவை, அல்லது நீங்கள் ஒரு font-size ஐ மாற்றினால் அதன் பெற்றோரினது, தட்டச்சு செய்யுங்கள். உறுதியில்லையென்றால், 16 ஐ விட்டு முடிவை ஒரு தோராயமாகக் கருதுங்கள்.

em மதிப்பை நகலெடுங்கள்

padding: 1.25em போல, எண்ணை அதன் அலகுடன் உங்கள் CSS இல் பயன்படுத்துங்கள். அலகு இல்லாத எண் பெரும்பாலான பண்புகளுக்குச் செல்லுபடியாகாது.

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

உலோக அச்சில் em

em வலையைவிடப் பழையது. உலோக அச்சில் அது வார்க்கப்பட்ட ஒரு தொகுதியின் அகலம், பெரிய M இன் பெயரால் அழைக்கப்பட்டது, அச்சிட்ட வரியில் கிடைமட்ட இடத்தின் இயல்பான அலகு. அச்சுக்கலைஞர்கள் இன்னும் em கோடுகள், em இடைவெளிகளைப் பற்றிப் பேசுகிறார்கள். CSS இல் கருத்து ஒரு தளர்வான வடிவில் தப்பிப் பிழைக்கிறது: ஒரு em என்பது நடப்பு எழுத்துருவின் அளவு.

பிக்சலும் rem உம்

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

em சரியான தேர்வாக இருக்கும் இடங்கள்

பொத்தான்களுக்கும் படிவப் புலங்களுக்கும் உள்ளே உள்ளிடம்

padding: 0.5em 1em கொண்ட ஒரு பொத்தான் எந்த உரை அளவிலும் விகிதத்தில் அதே போலத் தெரிகிறது. லேபிளைப் பெரிதாக்குங்கள், முழுப் பொத்தானும் அதனுடன் வளர்கிறது, ஒரு கருவிப்பட்டையிலும் ஒரு முக்கியப் பதாகையிலும் பயன்படுத்தப்படக்கூடிய ஒரு கூறிலிருந்து நீங்கள் விரும்புவது அதுவே.

ஐகான்களுக்கு அருகில் இடைவெளி

ஒரு தலைப்பைத் தொடரும் ஒரு ஐகானுக்குத் தலைப்புடன் அளவிடும் ஓர் இடைவெளி தேவை. 0.4em ஓரம் அதைச் செய்கிறது; 6px ஓரம் செய்வதில்லை.

தலைப்புகள், பத்திகளைச் சுற்றி ஓரங்கள்

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

ஊடகக் கேள்விகள்

em இல் எழுதப்பட்ட முறிவுப் புள்ளிகள் வாசகரின் உரை அளவுக்குப் பதிலளிக்கின்றன, எனவே தங்கள் உரையைப் பெரிதாக்கியவருக்கு அமைப்பு அதன் குறுகிய வடிவத்துக்கு முன்னதாக மாறுகிறது. ஊடகக் கேள்விகளில், em எந்த உறுப்பையும் அல்ல, உலாவியின் இயல்பைக் குறிக்கிறது, எனவே அது கூட்டுச்சேராது.

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

தவறான அடிப்படையைப் பயன்படுத்துதல்

மிகப் பொதுவான பிழை. font-size க்கு, பெற்றோரின் அளவைப் பயன்படுத்துங்கள்; மற்ற எல்லாவற்றுக்கும், உறுப்பின் சொந்தத்தை. அடிப்படையைத் தட்டச்சு செய்யும் முன் நீங்கள் எந்தப் பண்பை மாற்றுகிறீர்கள் என்று சரிபாருங்கள்.

பெற்றோரும் em இல் இருக்கலாம் என்பதை மறத்தல்

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

ஒரு முழுக் கூறுக்கும் ஓர் எண்ணை எதிர்பார்த்தல்

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

ஒரே பண்புக்கு em ஐயும் rem ஐயும் கலத்தல்

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

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

16 px என்பது எத்தனை em?

ஒன்று, நடப்பிலுள்ள எழுத்துரு அளவு 16 px என்றால். உறுப்பின் எழுத்துரு அளவு 20 px என்றால், 16 px என்பது 0.8 em.

em, rem ஐவிடச் சிறந்ததா?

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

என் உள்ளிடம் ஏன் எதிர்பார்த்ததைவிடப் பெரிதாக உள்ளது?

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

நான் தசமங்களைப் பயன்படுத்தலாமா?

ஆம். 0.625em, 1.333em போன்ற மதிப்புகள் இயல்பானவை.

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

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

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

வகுப்பதற்குப் பதிலாகப் பெருக்கும் em இலிருந்து px க்கு உடன்.

px ஐ em ஆக மாற்றும்போது புத்திசாலித்தனமாகத் தேர்ந்தெடுத்தல்

மதிப்பு எதற்குச் சொந்தம் என்று தீர்மானியுங்கள்

அது உரைக்குச் சொந்தமானால், em சரி. அது ஒரு நெடுவரிசை அகலம் அல்லது ஒரு பிரிவு இடைவெளி போன்ற பக்கத்துக்குச் சொந்தமானால், rem அல்லது ஒரு பார்வைச்சாளர அலகு சிறந்த பொருத்தம். px இலிருந்து vw க்கு ஓர் அளவைத் திரை அகலத்தின் ஒரு பங்காக வெளிப்படுத்துகிறது.

நோக்கத்தை ஒரு கருத்தில் எழுதுங்கள்

padding: 0.75em 1.25em; /* 12px 20px at 16px */ போன்ற ஒரு வரி காரணத்தைக் காணக்கூடியதாக்குகிறது. பின்னர் எழுத்துரு அளவு மாறும்போது, எண்கள் எதுவாக இருக்க வேண்டும் என்று நீங்கள் அறிவீர்கள்.

கூறின் எழுத்துரு அளவை ஓரிடத்தில் வைத்திருங்கள்

கூறின் வேர் உறுப்பில் எழுத்துரு அளவை அமைத்து, உள்ளே எல்லாம் அதைக் குறிக்கட்டும். அப்போது உள்ளே em மதிப்புகள் கூறு முழுவதும் அதே பொருளைக் கொள்கின்றன, ஓர் ஒற்றை அடிப்படைக்கு எதிராக நீங்கள் px ஐ em ஆக மாற்றலாம்.

px ஐ em ஆக மாற்றும்போது நல்ல பழக்கங்கள்

px ஐ em ஆக ஒரு நேரத்தில் ஒரு கூறாக மாற்றுங்கள்

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

வட்டமான மதிப்புகளுக்கு அல்ல, ஒற்றைப்படை மதிப்புகளுக்குக் கணிப்பானைப் பயன்படுத்துங்கள்

8, 16, 24 பிக்சல் போன்ற மதிப்புகள் 16 என்ற அடிப்படையில் தூய em எண்களாக மாறுகின்றன. 22 அல்லது 13 போன்ற ஒற்றைப்படை மதிப்புகள் நீண்ட தசமங்களைத் தருகின்றன. இவற்றுக்கு நீங்கள் px ஐ em ஆக மாற்றும்போது, வடிவமைப்புக்கு உண்மையில் சரியான எண் தேவையா அல்லது நெருக்கமான வட்ட em மதிப்பு அவ்வளவே நன்றாக இருக்குமா என்று தீர்மானியுங்கள். வடிவமைப்பாளர்கள் பெரும்பாலும் சுற்றுவதில் மகிழ்கிறார்கள், தூய நடைத்தாள் பராமரிக்க எளிது.

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

ஒவ்வொரு em மதிப்புக்கும் அருகிலுள்ள ஒரு குறுகிய கருத்து, அடிப்படை என்னவாக இருந்தது என்று சொல்வது, அடுத்தவருக்கு உதவுகிறது. பின்னர் யாராவது கூறின் எழுத்துரு அளவை மாற்றினால், இடைவெளி தற்செயலாக அல்ல, வடிவமைப்பால் அதைப் பின்பற்றுகிறது என்று அவர்கள் அறிவார்கள். அதை ஒருமுறை எழுதுவது அதற்கு ஆகும் நேரத்துக்குத் தகுதியானது.

rem இணையுடன் ஒப்பிடுங்கள்

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

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

அதே கருவிக் குடும்பம் அருகிலுள்ள மாற்றங்களை உள்ளடக்குகிறது. பிக்சல்களுக்குத் திரும்பச் செல்ல, em இலிருந்து px க்கு பயன்படுத்துங்கள். வேருக்குச் சார்பான அளவுகளுக்கு, px இலிருந்து rem க்கு மற்றும் rem இலிருந்து px க்கு உள்ளன, திரைக்குச் சார்பான அளவுகளுக்கு, px இலிருந்து vw க்கு மற்றும் vw இலிருந்து px க்கு. அதே நடைத்தாளின் நிறங்களுக்கு, HEX இலிருந்து RGB க்கு மற்றும் HEX இலிருந்து HSL க்கு குறியீடுகளைக் கையாள்கின்றன.

ஒரு செய்து காட்டிய எடுத்துக்காட்டு

ஒரு பொத்தான் லேபிள் 14 px என்றும், வடிவமைப்பு பொத்தானுக்கு 10 px செங்குத்து உள்ளிடமும் 20 px கிடைமட்ட உள்ளிடமும் தருகிறது என்றும் வைத்துக்கொள்ளுங்கள். நீங்கள் அடிப்படையாக 14 ஐத் தட்டச்சு செய்து, 10 ஐத் தட்டச்சு செய்து 0.714 em எனப் படிக்கிறீர்கள், 20 ஐத் தட்டச்சு செய்து 1.429 em எனப் படிக்கிறீர்கள். நடைத்தாளில் padding: 0.714em 1.429em என்று எழுதுகிறீர்கள். அதே பொத்தான் 18 px லேபிளுடன் ஒரு முக்கியப் பகுதியில் பயன்படுத்தப்படும்போது, உள்ளிடம் விகிதத்தில் 12.9 px, 25.7 px ஆகிறது. நீங்கள் 10px, 20px என்று எழுதியிருந்தால், பொத்தான் பெரிய உரையைச் சுற்றி மெலிதாகத் தெரிந்திருக்கும்.

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

மாற்றும் முன்

மதிப்பு எந்தப் பண்புக்குச் சொந்தம் என்று தீர்மானித்து, அது எந்த எழுத்துரு அளவுக்குச் சார்பாக இருக்க வேண்டும் என்று கண்டறியுங்கள்.

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

பிக்சல் மதிப்பையும் சரியான அடிப்படையையும் தட்டச்சு செய்து, em எண்ணை அதன் அலகுடன் நகலெடுங்கள்.

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

உலாவியில் கூறின் எழுத்துரு அளவை மாற்றி, இடைவெளி பின்தொடர்கிறதா என்று சரிபாருங்கள். கூட்டுச்சேரும் உள்ளமைந்த em மதிப்புகளைத் தேடுங்கள்.

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

உள்ளிடத்துக்கு வேர் அளவை அடிப்படையாகப் பயன்படுத்துதல்

அது rem இன் வேலை. em உறுப்பின் சொந்த எழுத்துரு அளவைக் குறிக்கிறது.

ஒவ்வோர் எழுத்துரு அளவுக்கும் em ஐப் பயன்படுத்துதல்

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

பார்வைக்கு நேர்த்தியான ஆனால் தவறான எண்ணுக்குச் சுற்றுதல்

ஒரு பெரிய எழுத்துருவால் பெருக்கும்போது 1.43 என்பது 1.5 க்குச் சமமல்ல. போதிய இலக்கங்களை வைத்திருங்கள்.

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

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

சுருக்கம்

இங்கே px ஐ em ஆக மாற்ற, பிக்சல்களில் அளவையும் அது சார்புடைய எழுத்துரு அளவையும் தட்டச்சு செய்து, em = px ÷ base என்ற சூத்திரத்தைப் பயன்படுத்தி உடனே முடிவைப் படியுங்கள். மாற்றம் மதிப்பு பயன்படுத்தப்படும் இடத்தில் நடப்பிலுள்ள எழுத்துரு அளவுடனான விகிதத்தை வைத்திருக்கிறது. அது ஒரு பக்கத்துக்கு ஓர் ஒற்றை விடையைத் தர முடியாது: em உறுப்பின் சொந்த எழுத்துரு அளவுடன், அல்லது font-size க்குப் பெற்றோரினுடன், சார்புடையது, எனவே அதே 1.5 em என்பது 16 px உறுப்புக்குள் 24 px, 24 px உறுப்புக்குள் 36 px, em க்குள் em பெருக்குகிறது. எல்லா இடங்களிலும் நிலைக்கும் ஓர் எண்ணுக்கு, rem ஐப் பயன்படுத்துங்கள். எதுவும் பதிவேற்றப்படுவதில்லை.