Vipi vya CSS vinagawanywa katika kabisa (imara) na jamaa (inayobadilika kwa kitu). Kuchagua vizuri ni muhimu kwa vipengele vya kukokota na vinvinavinyani.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Tumia kwa vitu ambavyo havipaswa kubanwa (mipaka, maelezo madogo imara).
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 inazidisha kupitia nesting (mtoto wa mtoto inazidishwa), ambayo inaweza kuzunguka bila matarajio. rem kila wakati inarejea mizizi, kwa hiyo ni sawa na maamuzi — kiwango cha thamani za herufi na mipango. Tumia em wakati unataka kuwa na ukubwa wa jamaa na herufi ya ndani (mfano: padding kwenye kitufe kinachobadilika kwa matini yake).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Kutumia rem kwa aina inaheshimu watumiaji wanaoanzisha herufi kubwa zaidi ya kawaida — faida halisi ya kukamatiliwa ambayo px inakamatilia.
Vipu sahihi vinafanya vipengele vya kukokota na vinvinavinyani: rem kwa aina/mipango (sawa + inaheshimu mipango ya watumiaji), %/vw/vh kwa vipengele vya mwendo, px kwa maelezo imara na em kwa ukubwa jamaa wa ndani.
Vipu vipya vya viewport (dvh, svh) pia vinakamatilia matatizo ya urefu wa upau wa anwani wa simu.