CSS அலகுகள் பொருட்பிறப்பு (நிலையான) மற்றும் சார்பார்ந்த (ஏதேனும் ஒன்றுடன் அளவாற்றக்கூடிய) என பிரிக்கப்படுகின்றன. சரியான தேர்வு மறுமொழி மற்றும் அணுகக்கூடிய வடிவமைப்புக்கு முக்கியமாகும்.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
ஐப் பயன்படுத்தவும் - அளவாற்றக்கூடிய வேண்டாம் (எல்லைகள், சிறிய நிலையான விவரங்கள்).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em கூட்டுவாக் செயல்படுகிறது உள் உறுப்பிணைப்பின் மூலம் (உள் உறுப்பின் குழந்தை பெருக்கப்படுகிறது), இது எதிர்பாராத வகையில் சுழலக்கூடும். rem எப்போதும் மூல கூறுகளை குறிப்பிடுகிறது, எனவே இது கணிப்பொருத்தமாக இருக்கிறது — எழுத்துரு அளவுகள் மற்றும் இடைவெளிக்கான தொடக்கம். em ஐப் பயன்படுத்தவும் நீங்கள் விரும்பும் அளவு உள் எழுத்துருவுடன் சார்பார்ந்ததாக இருக்க (எ.கா. பொத்தானில் மீதமுள்ள இடம் அதன் உரையுடன் அளவாற்றக்கூடியது).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
rem ஐ வகைக்குப் பயன்படுத்துவது பெரிய இயல்பான எழுத்துருவை அமைக்கும் ஆட்களுக்கு மரியாதைக் குறிப்பு செய்கிறது — px ஆல் முறிந்த ஒரு உண்மையான அணுகக்கூடிய வெற்றி.
சரியான அலகு வடிவமைப்புகளை மறுமொழிக்கூடியவை மற்றும் அணுகக்கூடியவை செய்கிறது: rem வகை/இடைவெளி (கணிப்பொருத்தமான + ஆட்களின் அமைப்புகளுக்கு மரியாதை), %/vw/vh திரவ வடிவமைப்பு, px நிலையான விவரங்கள் மற்றும் em உள் சார்பார்ந்த அளவு.
নতুন viewport அலகுகள் (dvh, svh) மொபைல் முகவரி பட்டியை உயர மிகவும் சரிசெய்கிறது.