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) మొబైల్ చిరునామా-బార్ ఎత్తు సమస్యలను కూడా పరిష్కరిస్తాయి.