Saununan CSS suna raba tsakani cikakke (tushe) da dangi (ma'auki tare da wani abu). Zabar daidai yana da mahimmanci don jerin-waje da samun dama.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
yi amfani da don abubuwa da bai kamata a ma'auki ba (iyaye, kananan bayani masu tushe).
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 ya haɗa ta cikin jirga (yara-yar na yara ta ninka), wanda zai iya tashi ba tare da nisisantarwa ba. rem koyaushe yana nuni wa tushe, don haka yana iya zama hakikanci — zabar ainihi don girman haraffi da kusanci. Buga em lokacin da kana buƙatar girma dangi ga haraffi na gida (m.s. shiryar akan maɓalli da ya ma'auki tare da rubutunsa).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Tin amfani da rem don nau'i yana mutunta masu amfani da suka saita girman haraffi mafi girma ainihi — babbar nasarar samun dama da px ke karye.
Sauni daidai ya sa jerin-waje ta zama malamai da samun dama: rem don nau'i/kusanci (hakikanci + mutunta saituran masu amfani), %/vw/vh don jerin-waje mai yawa, px don bayani masu tushe, da em don girman dangi na gida.
Sabuwar saununan viewport (dvh, svh) kuma suna gyara matsanancin girman bari na adireshin wayar.