Roinntear aonaid CSS i absalóideacha (socraithe) agus coibhneasacha (scálúchán le rud éigin). Tá roghnú ceart ríthábhachtach do leagan amach freagartha agus inrochtana.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Úsáid do rudaí nach ba cheart a scálú (imlíne, socruithe beaga fhosaithe).
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) */
Cumraíonn em tríd an nead (meall linbh ar mheall a iolraíonn), agus is féidir go scéimh go tobann. Tagann rem i gcónaí ar an bhunús, mar sin tá sé inchomhairimh — an rogha réamhshocraithe do mhéideanna cló agus spásáil. Úsáid em nuair a theastaíonn uait méid coibhneasach don chló áitiúil (m.sh. líonadh ar bhótún a scálúchán a théacs).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
An úsáid rem do chineál clóbhailithe a bhuachailleann na húsáideoirí a raibh clófhontúis níos mó socraithe acu — bua fíor-inrochtaineachta a bhriseann px.
Déanann an aonaid cheart leagan amach freagartha agus inrochtana: rem do chineál/spásáil (inchomhairimh + bhuachailleann socruithe úsáideora), %/vw/vh do leagan amach foluain, px do shocruithe fosaithe, agus em do mhéideanna coibhneasacha áitiúla.
Leasaíonn aonaid viewport níos nuaí (dvh, svh) fadhbanna fad bharr seoladh guthán freisin.