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

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

ஒரு பாணித் தாள் ஒரு தலைப்புக்கு margin-bottom: 0.75em என்றும், ஒரு பொத்தானுக்கு padding: 0.4em 0.9em என்றும், ஓர் உரைத் தொகுதிக்கு line-height 1.3em என்றும் சொல்கிறது. அவை நல்ல, நெகிழ்வான மதிப்புகள், ஆனால் அவற்றைக் கற்பனை செய்வது கிட்டத்தட்ட இயலாதது. அந்த ஓரம் எத்தனை பிக்ஸல்? பொத்தானின் இடைவெளி வடிவமைப்புக் கோப்பிலுள்ள 6 px, 14 px உடன் பொருந்துகிறதா? அதை அறிய நீங்கள் em ஐ px ஆக மாற்றுகிறீர்கள்: em குறிப்பிடும் எழுத்துரு அளவால் பெருக்கி, வடிவமைப்புக் கருவிகள் பயன்படுத்தும் அலகில் விடையைப் படிக்கிறீர்கள். உருவாக்குநர்கள் குறியீட்டை மதிப்பாய்வு செய்யும்போது, ஒரு கட்டமைப்பை மாதிரிக் காட்சியுடன் சரிபார்க்கும்போது, இடைவெளிச் சிக்கலைப் பிழைநீக்கும்போது அல்லது முடிந்த ஒரு கூறைப் பிக்ஸல்களில் சிந்திக்கும் ஒருவருக்கு ஒப்படைக்கும்போது கேட்கும் கேள்வி இது.

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

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

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

px என்பது em ஐ எழுத்துரு அளவால் பெருக்கியதற்குச் சமம்

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

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

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

நீங்கள் பக்கத்தைக் காண முடியாதபோது

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

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

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

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

பக்கத்துக்கு ஒரே விடையை அது தர முடியாது

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

சுற்றல்

முழு எண் அடிப்படையால் பெருக்குவது பெரும்பாலான மதிப்புகளுக்குத் துல்லிய முடிவுகளைத் தருகிறது. அடிப்படை ஒரு தசமமாக இருந்தால், எடுத்துக்காட்டாக 13.5 px, 1.2 em போன்ற ஒரு மதிப்பு 16.2 px தருகிறது. உலாவிகள் பின்னப் பிக்ஸல்களைக் கையாளுகின்றன, ஆனால் ஒரு மெல்லிய கோட்டு எல்லை அல்லது ஒரு கட்டத்திலுள்ள சின்னத்துக்கு முழுப் பிக்ஸல்கள் தேவைப்படும்போது, வேண்டுமென்றே சுற்றி எப்படித் தெரிகிறது என்று சரிபாருங்கள்.

உள்ளமை em மதிப்புகள் எப்படிப் பெருகுகின்றன

ஒரு பட்டியலுக்குள் ஒரு பட்டியல்

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

சங்கிலி வழியாக மேலே செல்லுதல்

உள்ளமை em இன் உண்மையான பிக்ஸல் அளவை அறிய, கீழே செல்லும் வழியில் ஒவ்வொரு மதிப்பாலும் அடிப்படையைப் பெருக்குங்கள்: 16 × 0.875 × 0.875 = 12.25. மாற்றி ஒரு நேரத்தில் ஒரு படியைச் செய்கிறது. ஒரு சங்கிலிக்கு, முதல் மதிப்பை மாற்றி, விடையை இரண்டாவதன் அடிப்படையாகப் பயன்படுத்தி தொடருங்கள். உலாவி செய்யும் அதே கணிதம் அது.

அது பெருகுவதை எப்படி நிறுத்துவது

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

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

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

நீங்கள் அமைத்த அடிப்படையில் பொதுவான em எண்கள் ஒத்திருக்கும் பிக்ஸல் மதிப்புகளின் ஓர் அட்டவணையைப் பக்கம் கொண்டுள்ளது: 0.5 em என்பது 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. இயல்பு அடிப்படையில் இவை rem க்கான அதே எண்கள். அடிப்படையை மாற்றுங்கள், அட்டவணையும் அதனுடன் மாறுகிறது, em உண்மையில் என்ன செய்கிறது என்று காண அது ஒரு நல்ல வழி.

இரு அடிப்படைகளை அருகருகே முயலுங்கள்

14 அடிப்படையுடன் 1.5 ஐத் தட்டச்சு செய்யுங்கள், பின் 20 அடிப்படையுடன். உங்களுக்கு 21 ம் 30 ம் பிக்ஸல்கள் கிடைக்கின்றன. em க்கும் rem க்கும் இடையிலான முழு வேறுபாடும் ஒரே சோதனையில் அதுவே: அதே எண், இரு உறுப்புகள், இரு அளவுகள்.

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

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

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

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

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

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

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

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

em

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

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

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

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

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

ஒரு வடிவமைப்பாளர் பிக்ஸல்களில் ஒரு கோப்பை ஒப்படைக்கிறார், குறியீடு em இல் உள்ளது. பக்கம் பொருந்துகிறதா என்று சரிபார்க்க, ஒவ்வொரு கூறின் எழுத்துரு அளவையும் பயன்படுத்தி em ஐ px ஆக மாற்றுகிறீர்கள். 14 px லேபிளும் 0.714em 1.429em இடைவெளியும் கொண்ட ஒரு பொத்தான் 10 px, 20 px ஆக வர வேண்டும், வடிவமைப்பு 12, 24 என்றால், ஒன்று தவறு.

இடைவெளியைப் பிழைநீக்குதல்

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

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

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

ஆவணப்படுத்தலும் சோதனைகளும் எழுதுதல்

ஒரு பக்கத்தைச் சோதிப்பவர்கள் தாம் காண்பதைப் பிக்ஸல்களில் விவரிக்கிறார்கள். இடைவெளி 0.9em என்று சொல்லும் ஓர் உருவாக்குநர் ஒரு சோதனையாளருக்கு மிகக் குறைவாகவே சொல்கிறார்; 12.6 px ஏதோ சொல்கிறது. மாற்றுவது இரு தரப்பும் ஒன்றையொன்று புரிந்துகொள்ளச் செய்கிறது.

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

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

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

em இல் உள்ள பெற்றோரை மறத்தல்

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

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

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

விடையை ஓர் உறுதிமொழியாக எடுத்தல்

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

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

1 em என்பது எத்தனை பிக்ஸல்?

நடப்பிலுள்ள எழுத்துரு அளவுக்கு இணையாக: இயல்பிலுள்ள சாதாரண உடல் உரைக்கு 16 px, 24 px உறுப்புக்குள் 24 px.

2 em என்பது எத்தனை பிக்ஸல்?

நடப்பிலுள்ள எழுத்துரு அளவின் இரு மடங்கு. 16 px இல் அது 32 px.

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

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

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

இல்லை. em என்பது உறுப்புக்குச் சார்பானது, rem வேருக்கு.

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

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

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

பெருக்குவதற்குப் பதிலாக வகுக்கும் px ஐ em ஆக மாற்றுவதன் மூலம்.

em பாணித் தாளைப் புரிந்துகொள்ளத்தக்கதாக வைக்கும் பழக்கங்கள்

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

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

ஒரு கூறுக்கு ஒருமுறை எழுத்துரு அளவை அமையுங்கள்

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

இடைவெளிக்கு em, எழுத்துக்கு rem

அதுவே பெரும்பாலான பாணித் தாள்கள் தேர்ந்தெடுக்கும் பிரிப்பு, கணிதத்தை எளிதாக வைக்கிறது. திரைக்குச் சார்பான அளவுகளுக்கு, px ஐ vw ஆகவும் vw ஐ px ஆகவும் கருவிகள்.

வேறோர் உரை அளவில் சோதியுங்கள்

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

விகாரமான நிலைகளுக்கு ஒரு முறை

வெளியிலிருந்து உள்ளே வேலை செய்யுங்கள்

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

எளிமையாக்க வேண்டுமா என்று தீர்மானியுங்கள்

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

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

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

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

நீங்கள் ஒரு பொத்தான் கூறை மதிப்பாய்வு செய்கிறீர்கள் என்று வைத்துக்கொள்ளுங்கள். லேபிள் 14 px, CSS padding: 0.714em 1.429em என்றும் ஒரு சின்னத்துக்கும் லேபிளுக்கும் இடையே 0.5em இடைவெளி என்றும் சொல்கிறது. நீங்கள் அடிப்படையாக 14 ஐத் தட்டச்சு செய்கிறீர்கள், பின் 0.714 ஐ, 10 px ஐப் படிக்கிறீர்கள், 1.429 ஐ, 20 px ஐப் படிக்கிறீர்கள், 0.5 ஐ, 7 px ஐப் படிக்கிறீர்கள். வடிவமைப்புக் கோப்பு 10, 20, 8 என்று சொல்கிறது. மூன்றில் இரண்டு பொருந்துகின்றன, எனவே இடைவெளியைப் பார்க்கிறீர்கள்: 14 அடிப்படையில் 8 px என்பது 0.571 em ஆக இருக்கும், யாரோ அதை 0.5 ஆகச் சுற்றினார். நீங்கள் மதிப்பாய்வில் அதை எழுப்புகிறீர்கள், திருத்தம் ஓர் எண்.

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

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

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

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

em மதிப்பைத் தட்டச்சு செய்யுங்கள், அடிப்படையை அமையுங்கள், முடிவின் அருகில் காட்டப்படும் அடிப்படையைக் குறித்து பிக்ஸல்களைப் படியுங்கள்.

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

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

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

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

உறுப்பின் எழுத்துரு அளவு 16 px ஆக இருக்கும்போது மட்டுமே அது சரி.

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

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

em பெருகுகிறது என்பதை மறத்தல்

ஓர் உள்ளமை உறுப்புக்குள் ஒரு மதிப்பு நீங்கள் பார்த்திராத ஓர் அளவுக்குச் சார்பானது. சங்கிலியைப் பின்தொடருங்கள்.

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

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

சுருக்கம்

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