பிக்சல் முதல் REM மற்றும் EM மாற்றி – இலவச CSS அலகு கணக்கீட்டி

பிக்சல்களை REM மற்றும் EM அலகுகளாக உடனடியாக மாற்றவும். வளர்ச்சிப்பட்ட வலை வடிவமைப்பிற்கான இலவச CSS அலகு மாற்றி. தனிப்பயன் எழுத்துரு அளவுகளை மற்றும் துல்லிய முடிவுகளுக்கான நேரடி கணக்கீடுகளை ஆதரிக்கிறது.

பிக்சல் (PX), ரூட் எம் (REM), மற்றும் எம் (EM) அலகு மாற்றி

பிக்சல் (PX), ரூட் எம் (REM), மற்றும் எம் (EM) அலகுகளுக்கு இடையே மாற்றம் செய்யவும். மற்ற அலகுகளில் சமதுல்ய மதிப்பைப் பார்க்க எந்தப் புலத்திலும் ஒரு மதிப்பை உள்ளிடவும்.

ரூட் எழுத்துரு அளவு

பெற்றோர் மூலப்பொருள் எழுத்துரு அளவு

பிக்சல்கள் (PX)

ரூட் எம் (REM)

rem

எம்

எதிர்மறை அல்லது பூஜ்ய மதிப்புகளுக்கு காட்சிப்படுத்தல் கிடைக்கவில்லை

மாற்று சூத்திரங்கள்

PX to REM: ரூட் எழுத்துரு அளவில் பிக்சல் மதிப்பைப் பிரிக்கவும்
PX to EM: பெற்றோர் எழுத்துரு அளவில் பிக்சல் மதிப்பைப் பிரிக்கவும்
REM to PX: ரூட் எழுத்துரு அளவில் ரெம் மதிப்பை பெருக்கவும்
EM to PX: பெற்றோர் எழுத்துரு அளவில் எம் மதிப்பை பெருக்கவும்

ஏற்றுகிறது கணக்கிடுதல்...

📚

ஆவணம்

பிக்சல் (PX), ரெம் (REM), மற்றும் எம் (EM) அலகு மாற்றி: அத்தியாவசிய CSS அலகுகள் விளக்கப்பட்டது

நவீன வலை மேம்பாட்டிற்கான CSS அலகு மாற்றத்தின் முக்கியத்துவம்

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

இந்த PX, REM மற்றும் EM அலகு மாற்றி உங்களுக்கு இந்த மூன்று அடிப்படை CSS அலகுகளுக்கிடையே விரைவாக மாற்ற உதவுகிறது. பிக்சல்கள் நுட்பமான கட்டுப்பாட்டை வழங்குகின்றன - எல்லைகள் மற்றும் நுட்பமான விவரங்களுக்கு சிறந்தவை. REM அலகுகள் மூல எழுத்துரு அளவுடன் அளவிடப்படுகின்றன, இது உங்கள் முழு தளத்திலும் நிலையான இடைவெளி மற்றும் எழுத்துரு வகைக்கு சிறந்தவை. EM அலகுகள் அவற்றின் பெற்றோர் மூலப்பொருளுக்கு ஏற்ப அளவிடப்படுகின்றன, சுய-கொண்ட கூறுகளை உருவாக்குவதற்கு சிறப்பாக பயன்படுகிறது.

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

CSS அலகுகளைப் புரிந்துகொள்ளல்: PX, REM மற்றும் EM

பிக்சல்கள் (PX) என்றால் என்ன?

பிக்சல்கள் (PX) மிகவும் நேரடியான CSS அலகு—நீங்கள் குறிப்பிடுவது அப்படியே கிடைக்கும். CSS பிக்சல் ஒரு குறிப்பு அலகு, அது எப்பொழுதும் வெளிப்படை திரை பிக்சல் அல்ல (குறிப்பாக ரெட்டினா திரைகளில்). அவை தாய் மற்றும் எழுத்துரு அளவுகளைப் பொருட்படுத்தாமல் நிலையான அளவை வழங்குகின்றன.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

பிக்சல்கள் எப்பொழுது நன்றாக வேலை செய்யும்:

எல்லைகள் மற்றும் பிரிப்பான்கள் (1px அல்லது 2px எல்லைகள் தெளிவாக இருக்கும்)
சிறிய, துல்லிய விவரங்கள் அளவு மாறாமல்
நிலையான அகலம் கொண்ட கொள்கலன்கள்
பிக்சல் துல்லிய ஸ்பிரைட் தாள்களுடன் வேலை செய்யும்போது சின்ன அளவுகள்

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

REM அலகுகள் என்றால் என்ன?

REM (மூல em) அலகுகள் மூல தனிமத்தின் எழுத்துரு அளவைப் பொறுத்து அளவு மாற்றம் அடைகின்றன—பொதுவாக <html> தனிமம். பெரும்பாலான உலாவிகள் இயல்புநிலையாக 16px ஆக அமைக்கின்றன, எனவே 1rem = 16px, நீங்கள் மூல எழுத்துரு அளவை மாற்றாவிட்டால்.

1html {
2  font-size: 16px; /* பெரும்பாலான உலாவிகளில் இயல்புநிலை */
3}
4
5.element {
6  width: 12.5rem; /* இயல்புநிலை மூல எழுத்துரு அளவுடன் 200px சமம் */
7  font-size: 1rem; /* 16px சமம் */
8  margin: 0.625rem; /* 10px சமம் */
9}
10

ஏன் மேம்பாட்டாளர்கள் REM அலகுகளைப் பெரிதும் பயன்படுத்துகிறார்கள்:

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

EM அலகுகள் என்றால் என்ன?

EM அலகுகள் தங்கள் தாய் தனிமத்தின் எழுத்துரு அளவைப் பொறுத்து அளவு மாற்றம் அடைகின்றன. "em" என்ற பெயர் அச்சுப் பணியிலிருந்து வந்தது—வரலாற்று ரீதியாக ஒரு தட்டச்சு வகையில் "M" எழுத்தின் அகலத்தைக் குறிக்கும்.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 16px சமம் (20px × 0.8) */
7  margin: 0.5em; /* 8px சமம் (16px × 0.5) */
8}
9

EM அலகுகள் சிறப்பாக வேலை செய்யும் இடங்கள்:

கூறு அடிப்படை வடிவமைப்பு: எழுத்துரு அளவுடன் மாறும் பேடிங் மற்றும் மார்ஜின்
அச்சுப் பணி: வரிக் கொடுப்பளவு மதிப்பற்ற அல்லது em மதிப்புகளுடன் நன்றாக வேலை செய்யும்
சுய-கொண்ட தொகுப்புகள்: எழுத்துரு அளவு மாறும்போது விகிதங்கள் தக்கவைக்கப்படும் பொத்தான்கள் அல்லது அட்டைகள்

கூட்டல் சிக்கல்: EM அலகுகள் நேரடி தனிமங்கள் வழியாக ஏறிச் செல்வதால் எதிர்பாராத முடிவுகள் ஏற்படலாம்.

மாற்று சூத்திரங்கள் மற்றும் கணக்கீடுகள்

PX, REM மற்றும் EM அலகுகளுக்கிடையேயான கணித உறவுகளை புரிந்துகொள்வது துல்லிய மாற்றங்களுக்கு மிகவும் முக்கியமானது. இங்கே நமது மாற்றியில் பயன்படுத்தப்படும் சூத்திரங்கள் உள்ளன:

PX முதல் REM மாற்றம்

பிக்சல்களை REM அலகுகளாக மாற்ற, பிக்சல் மதிப்பை மூல எழுத்துரு அளவால் வகுக்கவும்:

$REM = \frac{PX}{rootFontSize}$

எடுத்துக்காட்டாக, இயல்புநிலை மூல எழுத்துரு அளவு 16px ஆக இருக்கும்போது:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX முதல் EM மாற்றம்

பிக்சல்களை EM அலகுகளாக மாற்ற, பிக்சல் மதிப்பை பெற்றோர் மூலத்தின் எழுத்துரு அளவால் வகுக்கவும்:

$EM = \frac{PX}{parentFontSize}$

எடுத்துக்காட்டாக, பெற்றோர் எழுத்துரு அளவு 16px ஆக இருக்கும்போது:

16px = 1em
24px = 1.5em
8px = 0.5em

REM முதல் PX மாற்றம்

REM அலகுகளை பிக்சல்களாக மாற்ற, REM மதிப்பை மூல எழுத்துரு அளவால் பெருக்கவும்:

$PX = REM \times rootFontSize$

எடுத்துக்காட்டாக, இயல்புநிலை மூல எழுத்துரு அளவு 16px ஆக இருக்கும்போது:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM முதல் PX மாற்றம்

EM அலகுகளை பிக்சல்களாக மாற்ற, EM மதிப்பை பெற்றோர் மூலத்தின் எழுத்துரு அளவால் பெருக்கவும்:

$PX = EM \times parentFontSize$

எடுத்துக்காட்டாக, பெற்றோர் எழுத்துரு அளவு 16px ஆக இருக்கும்போது:

1em = 16px
1.5em = 24px
0.5em = 8px

REM முதல் EM மாற்றம்

REM அலகுகளை EM அலகுகளாக மாற்ற, மூல எழுத்துரு அளவு மற்றும் பெற்றோர் மூலத்தின் எழுத்துரு அளவை கருத்தில் கொள்ள வேண்டும்:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

மூல மற்றும் பெற்றோர் எழுத்துரு அளவுகள் ஒன்றாக இருந்தால் (எ.கா. 16px), அப்பொழுது 1rem = 1em.

EM முதல் REM மாற்றம்

EM அலகுகளை REM அலகுகளாக மாற்ற, பின்வரும் சூத்திரத்தைப் பயன்படுத்தவும்:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

மீண்டும், இரண்டு எழுத்துரு அளவுகளும் சமம் இருந்தால், 1em = 1rem.

பிக்சல் முதல் REM மற்றும் EM அலகு மாற்றியைப் பயன்படுத்தும் வழி

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

விரைவுத் தொடக்க வழிகாட்டி

உங்கள் மதிப்பை எந்தப் புலத்திலும் உள்ளிடவும் - பிக்சல்கள், REM அல்லது EM
முடிவுகளைப் பரிசோதிக்கவும் உடனடியாக மற்ற இரண்டு அலகுகளிலும்
எழுத்துரு அளவுகளை சரிசெய்யவும் உங்கள் திட்டத்திற்கேற்ப:
- மூல எழுத்துரு அளவு: <html> உறுப்பில் நீங்கள் அமைத்தது (பொதுவாக 16px)
- பெற்றோர் எழுத்துரு அளவு: குறிப்பிட்ட உறுப்பின் பெற்றோரின் எழுத்துரு அளவு (மேலும் பொதுவாக 16px)
நீங்கள் தேவைப்படும் மதிப்பை நகலெடுப்பு பொத்தானைப் பயன்படுத்தி நகலெடுக்கவும்

உங்கள் திட்டத்திற்கான துல்லிய முடிவுகளைப் பெறுதல்

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

உங்கள் மூல எழுத்துரு அளவைக் கண்டறிதல்: உலாவியின் டெவலபர் கருவிகளைத் திறந்து, <html> உறுப்பைப் பரிசீலித்து கணக்கிடப்பட்ட எழுத்துரு அளவைப் பார்க்கவும். நீங்கள் html { font-size: 62.5%; } அமைத்திருந்தால், உங்கள் மூல எழுத்துரு அளவு 10px (16px இன் 62.5%).

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

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

வடிவமைப்பிலிருந்து கோடுக்கு: உங்கள் Figma கோப்பில் padding: 24px காட்டப்படுகிறது. நீங்கள் சிறந்த அணுகல்திறனுக்கு REM அலகுகளைப் பயன்படுத்த விரும்புகிறீர்கள். PX புலத்தில் 24 ஐ உள்ளிடவும், மேலும் நீங்கள் 1.5rem ஐக் காண்பீர்கள் (16px மூலத்தை feltுமிட்டு).

பொத்தான் கூறுகளை உருவாக்குதல்: பொத்தானின் எழுத்துரு அளவுடன் பேடிங் அளவை மாற்ற விரும்புகிறீர்கள். பொத்தானில் font-size: 1.125rem (18px) இருந்தால், பெற்றோர் எழுத்துரு அளவை 18 ஆக அமைத்து, உங்கள் விரும்பிய பிக்சல் பேடிங்கை உள்ளிட்டு, வரும் EM மதிப்பைப் பயன்படுத்தவும்.

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

நடைமுறை CSS அலகு மாற்று பயன்பாடுகள்

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

வடிவமைப்பு கோப்புகளை பதிலாக்கும் CSS

நீங்கள் பிக்மாவில் அனைத்தும் பிக்சல்களில் குறிப்பிடப்பட்ட வடிவமைப்பைப் பெறுகிறீர்கள். கார்டு கூறு காட்டுகிறது:

பேடிங்: 24px
தலைப்பு எழுத்துரு அளவு: 28px
உடல் எழுத்துரு அளவு: 16px
கீழ் மார்ஜின்: 40px

REM அலகுகளுக்கு மாற்றுதல் (16px மூல அளவைக் கருத்தில் கொண்டு):

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

நன்மை என்ன? பார்வைக் குறைபாடுள்ள பயனர் தங்கள் உலாவியின் இயல்புநிலை எழுத்துரு அளவை 16px இலிருந்து 20px ஆக அதிகரிக்கும்போது, உங்கள் கார்டு சமவிகிதமாக அளவு மாற்றம் அடைகிறது. பேடிங், மார்ஜின்கள் மற்றும் உரை அனைத்தும் 25% வளர்ந்து, வடிவமைப்பின் காட்சி சமநிலையைப் பராமரிக்கின்றன. பிக்சல் மதிப்புகளுடன், வெறுமனே உரை மட்டுமே வளரும், இதனால் அமைப்பு சிதைந்துவிடும்.

அணுகக்கூடிய கூறு நூலகங்கள் உருவாக்கம்

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

1.button {
2  /* 16px எழுத்துரு அளவில் அடிப்படை பொத்தான் */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* அடிப்படை அளவில் 12px 24px */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* பேடிங் தானாகவே 15px 30px (0.75em × 20px) ஆகிறது */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* பேடிங் தானாகவே 10.5px 21px (0.75em × 14px) ஆகிறது */
17}
18

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

(மற்ற பகுதிகளும் இதேபோல் மொழிபெயர்க்கப்படும்)

CSS அலகுகள் வளர்ச்சி: நிலையான முதல் வளைவான வரை

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

பிக்சல் சரியாக இருக்கும் காலம் (1990கள்-2000கள்)

ஆரம்ப வலைத்தளங்கள் குறிப்பிட்ட திரை அகலங்களுக்காக வடிவமைக்கப்பட்டன—640px, பிறகு 800px, பிறகு 1024px. CSS அமைப்புகள் அச்சு வடிவமைப்பாளர்கள் புரிந்துகொண்ட பிக்சல்களைப் பயன்படுத்தின. தளங்கள் பிரௌசர்களில் அப்படியே தோன்றின (அவை வேலை செய்தபோது), ஆனால் எதிர்பாராத திரை அளவுகளில் முற்றிலும் உடைந்தன. வலைத்தளம் அச்சுப் பிரதிபோல் கையாளப்பட்டது: நிலையான, கட்டுப்படுத்தப்பட்ட, கணிக்கக்கூடிய.

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

மொபைல் விழிப்புணர்வு அழைப்பு (2007-2010)

iPhone எல்லாவற்றையும் மாற்றியது. திடீரென, 320px அகலமுள்ள திரைகளிலிருந்து பெரும் பாகம் வருகை நடைபெற்றது. பிஞ்ச் மற்றும் சூம் உதவியது, ஆனால் 1024px டெஸ்க்டாப்பிற்காக வடிவமைக்கப்பட்ட வலைத்தளங்கள் மொபைலில் வலிமிக்கவையாக இருந்தன.

ஏதன் மார்கோட்டின் 2010 கட்டுரை பதிலளிக்கும் வலை வடிவமைப்பு பற்றி ஒரு புதிய அணுகுமுறையை தெளிவாக்கியது: நீர்மை கட்டங்கள், வளைவான பிம்பங்கள் மற்றும் மீடியா வினாக்கள். சார்பு அலகுகள் விருப்பமானவை அல்ல, அவசியமாகின. ஆனால் EM அலகுகளின் கூட்டுப்படும் நடத்தை சிக்கலான அமைப்புகளில் பிழைகளை ஏற்படுத்தியது.

REM அலகுகள் மீட்டுக்கொள்கின்றன (2010-தற்பொழுது)

CSS3 2010 அளவில் REM அலகைப் பின்பற்றியது, EM இன் மிகப்பெரிய பிரச்சனையைத் தீர்த்தது: கூட்டுப்படுதல். REM நமக்கு சுரண்டல் சிக்கலின்றி சார்பு அளவீடு வழங்கியது. இன்டர்நெட் எக்ஸ்ப்ளோரர் 9 2011 இல் ஆதரவு சேர்த்தது, மேலும் 2015 ஆம் ஆண்டளவில் REM அலகுகள் மைய அளவில் இருந்தன.

இன்று, சிறந்த நடைமுறைகள் அலகுகளைத் தாக்கத்துடன் கலக்கின்றன. டைப்போகிராபி மற்றும் இடைவெளிக்கு REM. கூறு உள்ளகப் பிரமாணங்களுக்கு EM. நுட்ப விவரங்களுக்கு பிக்சல்கள். நவீன CSS செயல்பாடுகள் போன்ற clamp() இந்த அலகுகளை மாறுபடுமாறு கலக்கி, எந்தவொரு சூழலிலும் பொருந்தக்கூடிய அமைப்புகளை உருவாக்குகின்றன.

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

அலகு மாற்றத்திற்கான கோட் எடுத்துக்காட்டுகள்

JavaScript அலகு மாற்றி செயல்பாடுகள்

1// PX, REM மற்றும் EM அலகுகளுக்கிடையே மாற்றம்
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// பயன்பாட்டு எடுத்துக்காட்டு
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

CSS தனிப்பயன் பண்புகள் அலகு மாற்றத்திற்கு

1:root {
2  /* அடிப்படை எழுத்துரு அளவுகள் */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* பொதுவான பிக்சல் மதிப்புகள் REM-ஆக மாற்றப்பட்டவை */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* எழுத்துரு அளவு */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* பயன்பாட்டு எடுத்துக்காட்டு */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

SCSS மிக்சின்கள் அலகு மாற்றத்திற்கு

1// SCSS செயல்பாடுகள் அலகு மாற்றத்திற்கு
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// பயன்பாட்டு எடுத்துக்காட்டு
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // பெற்றோர் எழுத்துரு அளவு (18px) ஐ பயன்படுத்தி em மாற்றம்
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python அலகு மாற்றி

1def px_to_rem(px, root_font_size=16):
2    """பிக்சல்களை REM அலகுகளாக மாற்றுதல்"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM அலகுகளை பிக்சல்களாக மாற்றுதல்"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """பிக்சல்களை EM அலகுகளாக மாற்றுதல்"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM அலகுகளை பிக்சல்களாக மாற்றுதல்"""
15    return em * parent_font_size
16
17# பயன்பாட்டு எடுத்துக்காட்டு
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

CSS அலகுகளை மாற்றும்போது பொதுவான தவறுகள்

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

தவறு 1: தனிப்பட்ட ரூட் எழுத்து அளவுகளை கணக்கில் கொள்ளாமை

பிரச்சனை: 16px இயல்புநிலை ரூட் எழுத்து அளவை feltுமிட்டு 24px ஐ 1.5rem ஆக மாற்றுகிறீர்கள், ஆனால் உங்கள் திட்டம் html { font-size: 62.5%; } ஐப் பயன்படுத்துகிறது, இது ரூட்டை 10px ஆக்குகிறது. உங்கள் மூலப்பொருள் 24px இன் பதிலாக 15px ஆகிறது.

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

தவறு 2: நிலைக்கு உட்பட்ட கூறுகளில் EM அலகுகளைப் பயன்படுத்துதல்

பிரச்சனை: நீங்கள் தலைப்புகளுக்கு font-size: 1.2em உடன் ஒரு கார்டு கூறைக் கட்டமைக்கிறீர்கள். சரியாக வேலை செய்கிறது. பிறகு நீங்கள் ஒரு கார்டை மற்றொரு கார்டுக்குள் நிலைக்கு உட்படுத்துகிறீர்கள், மேலும் உள்ளக கார்டின் தலைப்பு 1.2em இன் பதிலாக 1.44em (1.2 × 1.2) ஆகிறது.

தீர்வு: உரைக்கான REM அலகுகளைப் பயன்படுத்தவும் மேலும் நீங்கள் குறிப்பாக நிலைக்கு உட்பட்ட நடத்தைக்கு EM அலகுகளைப் பயன்படுத்த விரும்பினால் தவிர. EM அலகுகளை உள்ளக எழுத்து அளவுடன் அளவிடப்பட வேண்டிய இடத்தில் பாதுகாக்கவும்.

தவறு 3: எல்லை அகலங்களை REM ஆக மாற்றுதல்

பிரச்சனை: நீங்கள் border: 1px ஐ border: 0.0625rem ஆக மாற்றுகிறீர்கள் ஒத்திசைவுக்காக. பயனர்கள் பெரிதாக்கும்போது அல்லது எழுத்து அளவை மாற்றும்போது, உங்கள் எல்லைகள் பருமனாகி அழகற்றுப் போகின்றன.

தீர்வு: எல்லைகளை பிக்சல்களில் வைத்திருக்கவும். துணை பிக்சல் எல்லைகள் (0.5px) மாறுபட்ட வலைத்தள ஆதரவைக் கொண்டுள்ளன, மேலும் எல்லைகள் அரிதாகவே உரையின் அளவுடன் அளவிடப்பட வேண்டும்.

தவறு 4: மீடியா வினவல் அலகுகள் பயனர் விருப்பங்களைக் கருத்தில் கொள்ளாமை

பிரச்சனை: நீங்கள் தட்டச்சு பிரிவுக்கு @media (min-width: 768px) ஐ எழுதுகிறீர்கள். பெரிய இயல்புநிலை எழுத்து அளவை அமைக்கும் பயனர்கள் தட்டச்சு அமைப்பைப் பெற மாட்டார்கள்.

தீர்வு: மீடியா வினவல்களில் EM அல்லது REM அலகுகளைப் பயன்படுத்தவும்: @media (min-width: 48em). இது MDN பதிலளிக்கும் வடிவமைப்பு ஆவணத்தின் பரிந்துரைப்படி பயனர் எழுத்து அளவு விருப்பங்களைக் கருத்தில் கொள்கிறது.

தவறு 5: கணக்கீட்டு முறைகளைக் கலப்பது

பிரச்சனை: உங்கள் Sass ஒரு கணக்கீட்டு முறையைப் பயன்படுத்துகிறது, உங்கள் JavaScript மற்றொரு முறையைப் பயன்படுத்துகிறது, மேலும் உங்கள் மனதின் கணக்கு மூன்றாவது முறையைப் பயன்படுத்துகிறது. முடிவுகள் பொருந்தவில்லை, பிக்சல் தள்ளுதலை ஏற்படுத்துகிறது.

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

அடிக்கடி கேட்கப்படும் கேள்விகள்

REM மற்றும் EM அலகுகளுக்கு இடையேயுள்ள வேறுபாடு என்ன?

குறிப்பு điள் முற்றிலும் வேறுபடுகிறது. REM அலகுகள் எப்பொழுதும் மூல <html> தனிப்பட்ட உறுப்பின் எழுத்துரு அளவைப் பார்க்கின்றன - உங்கள் உறுப்பு எவ்வளவு ஆழமாகப் பொதிந்திருந்தாலும், 1rem ஒரே கணக்கிடப்பட்ட மதிப்பிற்குச் சமம். EM அலகுகள் தங்கள் நேரடி பெற்றோரின் எழுத்துரு அளவைப் பார்க்கின்றன, இது ஒரு தொடர்ச்சியான விளைவை உருவாக்குகிறது.

இதை இவ்வாறு நினைத்துப் பாருங்கள்: நீங்கள் மூன்று <div> உறுப்புகளைப் பொதிந்திருந்தால், ஒவ்வொன்றும் font-size: 1.2em கொண்டிருந்தால், உள்ளமர்ந்த div இன் உரை நீங்கள் எதிர்பார்த்ததை விட மிகப் பெரிதாக இருக்கும் ஏனெனில் ஒவ்வொரு மட்டமும் பெருக்கத்தைப் பெருக்குகிறது. ஒவ்வொரு மட்டத்திலும் font-size: 1.2rem கொண்டிருந்தால், மூன்று div கள் அனைத்தும் அதே எழுத்துரு அளவைக் கொண்டிருக்கும் ஏனெனில் அவை அனைத்தும் மூலத்தைச் சுட்டிக்காட்டுகின்றன.

இதுதான் REM பிரபலமாகியது - வலை உலாவிகள் ஆதரவை மேம்படுத்திய பிறகு - வாரிசுத் தொடர்கள் கணக்கிடுவதற்கான மனதளவிலான சுமையை நீக்குகிறது.

மறுபடியும் வலை வடிவமைப்பிற்கு சிறந்த CSS அலகு எது?

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

REM ஐப் பயன்படுத்துங்கள்: மொத்த இடைவெளி, எழுத்துரு அளவுகள், கூறு இடைவெளிகள் மற்றும் பயனர் எழுத்துரு விருப்பங்களுடன் அளவிடப்பட வேண்டிய அளவீடுகள்

EM ஐப் பயன்படுத்துங்கள்: கூறு உள் இடைவெளி (பொத்தான் பேடிங்கள், அட்டை இடைவெளிகள்), மீடியா வினாக்கள் (பயனர் விருப்பங்களை மதிக்கின்றன), மற்றும் அவற்றின் உள்ளூர் சூழலுடன் அளவிடப்பட வேண்டிய உறுப்புகள்

பிக்சல்களைப் பயன்படுத்துங்கள்: 1px எல்லைகள் (அவை தெளிவாகத் தெரிகின்றன), பெட்டி நிழல்கள் (நுட்பமான நிழல்கள் துல்லியத்தைத் தேவைப்படுகின்றன), மற்றும் SVG ஸ்ட்ரோக் அகலங்கள்

சதவிகிதங்கள் அல்லது வியூபோர்ட் அலகுகளைப் பயன்படுத்துங்கள்: கொள்கலன் அகலங்கள், முழு உயரச் சமிக்ஞைகள்

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

(மற்ற பகுதிகளும் இதேபோல் மொழிபெயர்க்கப்பட வேண்டும்)

மேற்கோள்கள் மற்றும் மேலும் வாசிக்கப்பட வேண்டிய சாமக்கிரிகள்

"CSS மதிப்புகள் மற்றும் அலகுகள் மாடியூல் நிலை 3." W3C பரிந்துரை. https://www.w3.org/TR/css-values-3/
மார்கோட்டி, எத்தன். "மறுப்பளிக்கும் வலை வடிவமைப்பு." ஒரு பட்டியல் தனித்தன்மை, மே 25, 2010. https://alistapart.com/article/responsive-web-design/
ரட்டர், ரிச்சர்ட். "வலைக்கு பொருந்தப்பட்ட தட்டச்சு பாணியின் கூறுகள்." http://webtypography.net/
"CSS அலகுகள்." MDN வலை ஆவணங்கள். https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS பிக்சல்கள் vs. இயற்பியல் பிக்சல்கள்." ஸ்டாக் ஓவர்ஃப்லோ ஆவணங்கள். https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
கோயர், கிரிஸ்." CSS இன் நீளங்கள்." CSS-ட்ரிக்ஸ்." https://css-tricks.com/the-lengths-of-css/
"CSS தனிப்பயன் பண்புகளைப் (மாறிகளைப்) பயன்படுத்துதல்." MDN வலை ஆவணங்கள். https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"CSS இல் rem அலகுகளைப் புரிந்துகொள்ளுதல் மற்றும் பயன்படுத்துதல்." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

CSS அலகுகளை துல்லியமாக மாற்றத் தொடங்குங்கள்

கைமுறையாக CSS அலகு மாற்றம் சிரமமான மற்றும் பிழை நிறைந்த பணி. நீங்கள் மனதளவில் கணக்கிடுகிறீர்கள், கணக்கீட்டை இரண்டாம் முறை சரிபார்க்கிறீர்கள் மற்றும் எழுத்துரு அளவுகள் சரியாக இருக்கும் என்று நம்பிக்கொள்கிறீர்கள். இந்த PX to REM to EM மாற்றி அந்தச் சிக்கலை நீக்குகிறது.

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

அணுகக்கூடிய தளங்கள் மீது வேலை செய்யும் மேம்பாட்டாளர்களுக்கு, இந்தக் கருவி பயனர்கள் தங்கள் எழுத்துரு விருப்பங்களை சரிசெய்யும்போது தளங்கள் சரியாக அளவிடப்படுவதை உறுதிப்படுத்துகிறது - WCAG 2.1 மட்டம் AA இன் கீழ் ஒரு தேவை. கூறுப் புத்தகாலயங்கள் கட்டமைக்கும் அவர்களுக்கு, இது நீங்கள் விரும்பும் விகிதங்களை உருவாக்கும் EM மதிப்புகளை தெளிவுபடுத்துகிறது. Figma வடிவமைப்பை உற்பத்தி CSS-க்கு மொழிபெயர்க்கும் எவருக்கும், இது மாற்ற வேலைப்பாட்டை கணிசமாக வேகப்படுத்துகிறது.

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