Posted on • Updated on
CSS இல் EM அலகைப் புரிந்துகொள்ளுதல்
CSS EM அலகு பற்றிய அடிக்கடி கேட்கப்படும் கேள்விகள்
இறுதியாக, CSS EM அலகு பற்றிய அடிக்கடி கேட்கப்படும் சில கேள்விகளுக்கு பதிலளிப்போம்.
em மற்றும் rem அலகுகளுக்கிடையேயான வேறுபாடு என்ன?
em மற்றும் rem அலகுகளுக்கு இடையிலான முக்கிய வேறுபாடு அவற்றின் அடிப்படை அளவிற்கான குறிப்பு புள்ளிகளில் உள்ளது. em அலகு அதன் பெற்றோர் உறுப்பின் font-size-ஐச் சார்ந்தது. rem என்பது "root em" என்பதைக் குறிக்கிறது; அது ரூட் உறுப்பை (html) மட்டுமே சார்ந்தது. இது rem அலகை பெரிய இணையதளங்களில் கணிக்கக்கூடியதாகவும் நிர்வகிக்க எளிதாகவும் ஆக்குகிறது.
CSS இல் பிக்சல்களை em ஆக எவ்வாறு மாற்றுவது?
பிக்சல்களை em ஆக மாற்ற, 1em இன் மொத்த அளவை அறிய வேண்டும்; இயல்புநிலை 16px ஆகும்.
பின்னர் px / em என்ற சூத்திரத்தைப் பயன்படுத்தவும்.
எடுத்துக்காட்டாக, 1em அளவு 16px எனில் 32px என்பது 32 / 16 = 2em ஆக மாறும்.
எளிதாக மாற்ற எங்கள் PX to EM மாற்றியைப் பார்க்கவும்.
CSS இல் em அலகை பிக்சல்களாக எவ்வாறு மாற்றுவது?
em-ஐ பிக்சல்களாக மாற்ற, 1em இன் அளவை அறிய வேண்டும்; இயல்புநிலை 16px ஆகும்.
பின்னர் em * em size என்ற சூத்திரத்தைப் பயன்படுத்தவும். 1em 16px எனில் 2em என்பது 2 * 16 = 32px ஆகும்.
எளிதாக மாற்ற EM to PX மாற்றியைப் பயன்படுத்தவும்.
பிக்சல்களுக்குப் பதிலாக EM அலகுகளை ஏன் பயன்படுத்த வேண்டும்?
em அலகு பிக்சல்களை விட பல நன்மைகளை வழங்குகிறது. இது பயனரின் உலாவி அமைப்புகளுக்கு ஏற்ப மாறுவதால், font-size ஐ அதிகரித்த பயனர்களுக்கு இணையதளம் மேலும் அணுகக்கூடியதாகிறது. em அலகு பெற்றோர் உறுப்பின் font-size-க்கு ஏற்ப மாறுவதால், வடிவமைப்பு மேலும் நெகிழ்வாகவும் பதிலளிக்கக்கூடியதாகவும் இருக்கும்.
font-size தவிர பிற ஸ்டைல்களுக்கு em அலகுகளைப் பயன்படுத்தலாமா?
ஆம், em அலகை font-size மட்டுமின்றி நீள மதிப்பை ஏற்கும் எல்லா CSS ஸ்டைல் பண்புகளுக்கும் பயன்படுத்தலாம். உதாரணம்: width, height, padding, margin, line-height। இந்தப் பண்புகளுக்கு em பயன்படுத்துவது வெவ்வேறு திரை அளவுகளில் விகிதாசார தளவமைப்பை நிலைநிறுத்த உதவும்.
em அலகு எல்லா உலாவிகளிலும் ஆதரிக்கப்படுகிறதா?
ஆம், Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் em அலகு பரவலாக ஆதரிக்கப்படுகிறது. em அலகின் ஆதரவு பற்றி caniuse ஆவணத்தில் படிக்கலாம்.
EM அலகுடன் உறுப்புகளை நெஸ்ட் செய்தால் என்ன ஆகும்?
em அலகைப் பயன்படுத்தும் உறுப்புகளை நெஸ்ட் செய்தால், குழந்தை உறுப்பின் அளவு பெற்றோர் உறுப்பின் அளவைச் சார்ந்திருக்கும். இதனால் குழந்தை உறுப்பு எதிர்பார்த்ததை விடப் பெரியதாகவோ சிறியதாகவோ ஆகலாம். இதைத் தவிர்க்க, எப்போதும் ரூட் உறுப்பின் (html) அளவைச் சார்ந்த rem அலகைப் பயன்படுத்தலாம்.
EM அலகைப் பயன்படுத்துவதில் குறைபாடுகள் உள்ளதா?
em அலகு பல நன்மைகளை வழங்கினாலும், px போன்ற முழுமையான அலகுகளை விட நிர்வகிக்கக் கடினமாக இருக்கலாம். em சார்பு அலகாக இருப்பதால் அதன் உண்மையான அளவு பெற்றோர் உறுப்பின் அளவைப் பொறுத்து மாறலாம். இதனால் உறுப்புகளின் அளவைக் கணிப்பது கடினமாகலாம், குறிப்பாக சிக்கலான தளவமைப்புகளில்.
மீடியா க்வெரிகளில் EM அலகைப் பயன்படுத்தலாமா?
ஆம், மீடியா க்வெரிகளில் em அலகைப் பயன்படுத்தலாம். உண்மையில், மீடியா க்வெரிகளில் em அலகைப் பயன்படுத்துவது உங்கள் வடிவமைப்பின் பதிலளிப்புத்தன்மையை மேம்படுத்தலாம். em அலகுகள் சார்புடையவை என்பதால், அவை பயனரின் உலாவி அமைப்புகளுக்கு ஏற்ப சரிசெய்யப்படுகின்றன. அதாவது, உங்கள் மீடியா க்வெரிகள் பயனரின் அமைப்புகளுக்கு ஏற்ப மாறும்.
EM அலகுடன் உள்ளமைக்கப்பட்ட உறுப்புகளின் அளவை எவ்வாறு கணக்கிடலாம்?
em அலகுடன் உள்ளமைக்கப்பட்ட உறுப்புகளின் அளவைக் கணக்கிட, பெற்றோர் உறுப்பின் அளவைச் சேய் உறுப்பின் அளவுடன் பெருக்கவும். உதாரணமாக, பெற்றோர் உறுப்பின் அளவு 1.5em ஆகவும் சேய் உறுப்பின் அளவு 2em ஆகவும் இருந்தால், சேய் உறுப்பின் உண்மையான அளவு 1.5 * 2 = 3em ஆகும். ஏனெனில் சேய் உறுப்பின் அளவு பெற்றோர் உறுப்பின் அளவுடன் தொடர்புடையது.