CSS யூனிட் மாற்றி

CSS-இல் டஜன் கணக்கான வெவ்வேறு நீள யூனிட்கள் உள்ளன - px, pt, in, cm போன்ற absolute யூனிட்கள், em, rem போன்ற font-relative யூனிட்கள், vw, vh போன்ற viewport-relative யூனிட்கள். இவற்றைக் கலந்துவிடுவது ஸ்டைல்ஷீட்டில் சீரற்ற இடைவெளிக்கு மிகவும் பொதுவான காரணங்களில் ஒன்றாகும். இந்த கருவி எந்த இரண்டு CSS யூனிட்களுக்கு இடையிலும் ஒரு மதிப்பை மாற்றி, நீங்கள் தரும் base font size மற்றும் viewport dimensions ஐப் பயன்படுத்தி அதே மதிப்பை ஆதரிக்கப்படும் அனைத்து யூனிட்களிலும் ஒரே நேரத்தில் காட்டுகிறது.

Absolute யூனிட்கள்

Absolute யூனிட்கள் font size அல்லது திரையிலிருந்து சுயாதீனமாக, ஒன்றுக்கொன்று நிலையானவை. உலாவிகள் பயன்படுத்தும் அதே குறிப்பு (ஒரு இஞ்சிக்கு 96px) மூலம் இவை அனைத்தும் பிக்சலாக மாற்றப்படுகின்றன:

1\ in = 96\ px, \qquad 1\ cm = \frac{96}{2.54}\ px, \qquad 1\ mm = \frac{96}{25.4}\ px

1\ pt = \frac{96}{72}\ px, \qquad 1\ pc = 16\ px

Font-relative யூனிட்கள்

rem எப்போதும் root (<html>) எலிமெண்டின் font size ஐச் சார்ந்தது, em தற்போதைய எலிமெண்டின் font size ஐச் சார்ந்தது. இந்த கருவி ஒரே ஒரு base font size ஐக் கேட்டு இரண்டிற்கும் பயன்படுத்துகிறது, நீங்கள் ஸ்டைல் செய்யும் எலிமெண்டுக்கு அதன் சொந்த font-size override இல்லாதபோது இது துல்லியமாக இருக்கும்:

1\ em = 1\ rem = base\_font\_size\ (px)

Viewport-relative யூனிட்கள்

vw, vh ஆகியவை உலாவியின் viewport அகலம் மற்றும் உயரத்தின் சதவீதங்கள், எனவே இவற்றை மாற்ற நீங்கள் வடிவமைக்கும் viewport அளவு தேவை:

1\ vw = \frac{viewport\_width}{100}\ px, \qquad 1\ vh = \frac{viewport\_height}{100}\ px

மாற்றம் எவ்வாறு செயல்படுகிறது

ஒவ்வொரு யூனிட்டும் முதலில் பிக்சலின் பொதுவான அடிப்படைக்கு மாற்றப்பட்டு, பின்னர் பிக்சலிலிருந்து இலக்கு யூனிட்டிற்கு மாற்றப்படுகிறது:

px = value \times factor_{from}, \qquad result = \frac{px}{factor_{to}}

இந்த கருவியை எவ்வாறு பயன்படுத்துவது

நீங்கள் மாற்ற விரும்பும் எண் value ஐ உள்ளிடவும்
மாற்ற வேண்டிய யூனிட் மற்றும் மாற்ற வேண்டிய இலக்கு யூனிட் ஐத் தேர்ந்தெடுக்கவும்
em/rem-க்குப் பயன்படும் base font size ஐ அமைக்கவும் (இயல்புநிலை 16px)
vw/vh-க்குப் பயன்படும் viewport width, viewport height ஆகியவற்றை அமைக்கவும்
மாற்றப்பட்ட மதிப்பையும், அதே அளவை ஆதரிக்கப்படும் அனைத்து யூனிட்களிலும் காட்டும் முழு அட்டவணையையும் காண சமர்ப்பிக்கவும்

தீர்க்கப்பட்ட உதாரணம்

24px ஐ rem ஆக மாற்றுதல், base font size 16px ஆக இருக்கும்போது:

result = \frac{24}{16} = 1.5\ rem

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