Semua unit CSS: absolut, relatif fon, relatif viewport, fungsi fluid, serta unit sudut, masa dan resolusi — apa rujukan setiap unit dan bila sesuai digunakan.
Unit absolut (px, pt) mengekalkan saiz tetap tanpa mengira konteks; unit relatif (rem, vw, %) berskala terhadap nilai rujukan. Utamakan rem untuk saiz fon: ia menghormati tetapan saiz fon akar pengguna, jadi tipografi anda menghormati pilihan kebolehcapaian mereka. Gunakan clamp() untuk tipografi fluid yang membesar dan mengecil mengikut viewport tanpa sesekali melanggar had minimum atau maksimum.
Jadual rujukan · 38 unit
Unit CSSExplained
38 of 38 rows
Absolut
1/96 inci (piksel rujukan CSS).
Saiz UI tetap: sempadan, garis halus, dimensi ikon.
border: 1px solid #000;
1/72 inci (1pt = 1.333px).
Lembaran gaya cetakan, apabila saiz dipetakan kepada kertas fizikal.
font-size: 12pt;
1 sentimeter (≈37.8px).
Tata letak cetakan yang memerlukan ukuran sebenar.
margin: 2cm;
1 milimeter (≈3.78px).
Ukuran cetakan yang halus.
padding: 5mm;
1 inci (96px = 2.54cm).
Tata letak cetakan bersaiz inci.
margin: 1in;
Relatif fon
Saiz fon elemen itu sendiri (diwarisi daripada induknya).
Penjarakan yang berskala bersama teks di sekelilingnya.
padding: 1em;
Saiz fon elemen akar (elemen html).
Saiz fon: ia menghormati tetapan saiz fon akar pengguna.
font-size: 1.25rem;
Lebar advance glyph '0' pada fon semasa.
Tetapkan panjang baris yang selesa dibaca (aksara sebaris).
max-width: 70ch;
Ketinggian-x fon semasa (tinggi huruf kecil 'x').
Metrik menegak yang terikat pada muka taip.
line-height: 2ex;
Ketinggian kapital fon semasa (tinggi huruf besar).
Metrik menegak mengikut huruf besar, lebih rapat daripada ex.
padding-top: 0.5cap;
Lebar advance ideogram '水' (air) pada fon semasa.
Penyizingan yang mengikut satu sel aksara CJK.
width: 4ic;
Tinggi baris terkira elemen itu sendiri.
Saizkan elemen dalam baris teks penuh.
height: 3lh;
Tinggi baris elemen akar.
Penjarakan dalam gandaan tinggi baris asas dokumen.
margin-block: 2rlh;
Relatif viewport
Nilai properti sama milik induk.
Tata letak fluid bersaiz mengikut elemen pembungkus.
width: 50%;
1% lebar viewport.
Seksi full-bleed bersaiz mengikut lebar skrin.
width: 100vw;
1% tinggi viewport.
Seksi hero atau tindanan yang merentangi tinggi skrin.
height: 100vh;
1% dimensi viewport yang lebih kecil.
Saizkan elemen agar muat pada skrin dalam semua orientasi.
font-size: 5vmin;
1% dimensi viewport yang lebih besar.
Isi paksi dominan viewport.
font-size: 5vmax;
1% tinggi viewport kecil (UI pelayar dipaparkan sepenuhnya).
Seksi mudah alih tinggi penuh yang muat di atas chrome pelayar yang diluaskan.
height: 100svh;
1% tinggi viewport besar (UI pelayar tersembunyi).
Latar yang mesti menutup skrin walaupun chrome pelayar menguncup.
height: 100lvh;
1% tinggi viewport dinamik, mengikut UI pelayar ketika muncul dan hilang.
Pembaikan mudah alih untuk 100vh: tingginya diubah saiz apabila chrome pelayar muncul.
height: 100dvh;
1% lebar viewport kecil.
Padanan lebar bagi svh untuk keadaan viewport paling sempit.
width: 100svw;
1% lebar viewport besar.
Padanan lebar bagi lvh untuk keadaan viewport paling lebar.
width: 100lvw;
1% lebar viewport dinamik, mengikut UI pelayar.
Padanan lebar bagi dvh apabila viewport berubah saiz bersama chrome.
width: 100dvw;
1% saiz viewport sepanjang paksi inline (lebar dalam mod penulisan mendatar).
Penyizingan viewport yang mengikut arah penulisan.
width: 50vi;
1% saiz viewport sepanjang paksi blok (tinggi dalam mod penulisan mendatar).
Penyizingan viewport yang kekal betul dalam mod penulisan menegak.
height: 50vb;
Fluid
Nilai pilihan yang dibatasi oleh minimum dan maksimum.
Tipografi fluid yang tidak sesekali melanggar had minimum atau maksimum.
width: clamp(320px, 80vw, 1100px);
Yang terkecil antara argumen berpisah koma.
Hadkan saiz agar tidak sesekali melebihi maksimum.
width: min(100%, 600px);
Yang terbesar antara argumen berpisah koma.
Tekankan saiz minimum yang membesar bersama viewport.
width: max(50%, 300px);
Sudut
1/360 daripada bulatan penuh.
Transformasi putaran dan kedudukan sudut gradien.
transform: rotate(45deg);
Radian; 1rad ≈ 57.2958deg.
Sudut yang dikira daripada matematik, seperti transformasi terjana.
transform: rotate(1.5708rad);
Gradian; 400grad = bulatan penuh.
Nilai sudut warisan atau bergaya ukur.
transform: rotate(100grad);
1turn = satu bulatan penuh 360°.
Putaran penuh atau separuh yang mudah dibaca sepintas lalu.
transform: rotate(0.5turn);
Masa
Satu saat.
Tempoh animasi dan transisi.
transition: opacity 0.3s;
Satu milisaat (1s = 1000ms).
Animasi dan lengah maklum balas UI yang singkat.
animation-duration: 150ms;
Resolusi
Titik per inci pada output.
Media query resolusi bercetak.
@media (min-resolution: 300dpi)
Titik per unit px; 1dppx bersamaan paparan standard 96dpi.