| Unit | Bandingkan semua unit CSS, termasuk px, em, rem, vw, vh, fr, dan lainnya. Termasuk contoh, dukungan browser, dan kapan menggunakan setiap unit. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Unit | Bandingkan semua unit CSS, termasuk px, em, rem, vw, vh, fr, dan lainnya. Termasuk contoh, dukungan browser, dan kapan menggunakan setiap unit. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Unit | Bandingkan semua unit CSS, termasuk px, em, rem, vw, vh, fr, dan lainnya. Termasuk contoh, dukungan browser, dan kapan menggunakan setiap unit. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Unit | Bandingkan semua unit CSS, termasuk px, em, rem, vw, vh, fr, dan lainnya. Termasuk contoh, dukungan browser, dan kapan menggunakan setiap unit. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Unit | Bandingkan semua unit CSS, termasuk px, em, rem, vw, vh, fr, dan lainnya. Termasuk contoh, dukungan browser, dan kapan menggunakan setiap unit. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Skala dengan ukuran font :root, menghormati pengaturan browser pengguna, konsisten di seluruh komponen
Hindari px — tidak menghormati preferensi font pengguna
rem untuk jarak global yang konsisten; em untuk jarak relatif terhadap ukuran font komponen
Hindari px untuk komponen yang diskalakan
% untuk kontainer fluid; ch (45–75ch) untuk panjang baris prosa optimal
Hindari px tetap untuk lebar konten utama
dvh menghindari tumpang tindih chrome browser mobile; vh oke untuk desktop saja
Hindari 100vh saja di mobile — bilah URL memotong konten
Mendistribusikan ruang yang tersisa secara proporsional; lebih bersih dari % dalam grid
Hindari menggabungkan fr dengan kolom px tetap secara naif
Rendering tepat piksel; tidak perlu diskalakan dengan teks
Tidak perlu satuan relatif di sini
Gunakan rem untuk ukuran font. rem relatif terhadap ukuran font elemen root (biasanya 16px), memudahkan penskalaan seluruh UI dengan mengubah ukuran font root. Ini juga menghormati preferensi ukuran font browser pengguna, meningkatkan aksesibilitas. Gunakan px hanya untuk border, bayangan, dan elemen yang tidak perlu diskalakan.
em relatif terhadap ukuran font elemen induk, yang dapat bertambah dalam elemen bersarang. rem relatif terhadap ukuran font elemen root ('<'html>), membuatnya lebih dapat diprediksi. Untuk ukuran font, rem umumnya lebih disukai. em berguna untuk padding dan margin yang harus diskalakan dengan ukuran font komponen itu sendiri.
Gunakan vw/vh untuk elemen yang harus diukur relatif terhadap viewport browser (misalnya, bagian hero layar penuh, modal). Gunakan persentase untuk elemen yang harus diukur relatif terhadap kontainer induknya. dvh (dynamic viewport height) lebih disukai daripada vh di mobile di mana bilah alamat mempengaruhi tinggi.
Satuan container query (cqw, cqh, cqi, cqb) relatif terhadap ukuran elemen kontainer daripada viewport. Mereka memerlukan konteks kontainer (container-type: inline-size). Ideal untuk komponen yang benar-benar responsif yang perlu beradaptasi dengan ukuran kontainer mereka terlepas dari ukuran viewport.