Unit CSS Diterangkan: px, rem, em, vh — dan Bila Perlu Menggunakannya
Memilih unit CSS yang salah menyebabkan susun atur pecah pada saiz skrin berbeza, fon yang mengabaikan pilihan pengguna, dan jarak yang terasa tidak konsisten. Berikut adalah panduan praktikal untuk memilih unit yang betul setiap masa.
Mengapa Unit CSS Penting
CSS mempunyai lebih daripada sedenanya unit panjang, tetapi kebanyakan pembangun menggunakan lima daripadanya dalam praktis: px, rem, em, %, dan unit viewport vh serta vw. Kesalahan pemilihan tidak selalunya ketara — susun atur mungkin kelihatan cantik di skrin anda tetapi rosak di skrin orang lain, atau lulus QA visual tetapi gagal audit aksesibiliti kerana ia mengabaikan pilihan saiz fon pelayar pengguna.
Panduan ini menjelaskan apa yang diukur oleh setiap unit, memberikan anda peraturan keputusan konkrit untuk setiap situasi, dan merangkumi kesilapan yang sering timbul dalam semakan kod.
px — Piksel Mutlak
Satu CSS px dipetakan kepada satu piksel bebas peranti, bukan semestinya piksel skrin fizikal. Pada paparan retina 2x, satu CSS px dihasilkan menggunakan 2 piksel fizikal. Ini bermakna px adalah konsisten merentas skrin dari segi saiz visual, tetapi ia adalah mutlak — ia tidak berubah mengikut apa-apa.
Bila hendak menggunakan px:
- Sempadan (Borders):
border: 1px solid— sempadan 1px sepatutnya sentiasa kelihatan seperti garisan nipis, tanpa mengira konteks - Bayangan kotak dan garis luar (Outlines): perincian tepat yang tidak sepatutnya berubah saiz
- Titik pemutus media query:
@media (min-width: 768px) - Elemen hiasan bersaiz tetap (ikon dengan saiz tertentu, pembahagi)
Bila jangan gunakan px: saiz fon, padding, dan margin. Pengguna yang menetapkan saiz fon pelayar mereka kepada 20px kerana mereka sukar membaca teks kecil tidak akan mendapat manfaat daripada susun atur anda jika semuanya ditetapkan secara tetap dalam px. Keutamaan mereka akan diabaikan sepenuhnya.
rem — Root Em
rem merujuk kepada "root em." Ia sentiasa relatif kepada font-size elemen <html>, bukannya kepada ibu bapa (parent). Ini menjadikannya boleh diramal dengan cara yang tidak dilakukan oleh <em>.
Secara lalai, kebanyakan pelayar menetapkan saiz fon utama kepada 16px. Jadi:
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
Bila hendak menggunakan rem:
- Saiz fon — rem menghormati pilihan saiz fon pelayar pengguna
- Ruang yang sepatutnya berubah secara konsisten dengan saiz jenis (padding, margin, gap)
- Penyuaian komponen apabila anda mahu semuanya berubah saiz bersama
Trik 62.5%: Sesetengah pembangun menetapkan <html { font-size: 62.5%; } untuk menjadikan 1rem bersamaan dengan 10px (kerana 62.5% daripada 16px = 10px). Ini memudahkan pengiraan mental: <1.4rem = 14px. Kesannya ialah ia mengatasi pilihan asas fon pengguna melainkan anda menggunakannya dengan teliti — hanya lakukan ini jika anda memahami implikasi aksesibiliti dan gunakan pada peringkat komponen.
em — Relatif kepada Ibu Bapa (Parent)
<em adalah relatif kepada saiz fon yang dikira bagi elemen semasa (atau ibu bapa, apabila diaplikasikan pada saiz fon itu sendiri). Ini menjadikannya berguna untuk komponen yang perlu berubah saiz secara berkadar dengan saiz teks mereka sendiri.
Kes penggunaan klasik: padding butang. Jika anda menulis <padding: 0.5em 1em, padding butang akan berubah saiz secara automatik apabila anda mengubah saiz fon butang — butang kecil mendapat padding lebih kecil, butang besar mendapat lebih banyak.
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* padding berubah saiz secara automatik */ }
Masalah penggabungan (Compounding): Apabila anda menyusun elemen dengan saiz fon em, ia akan berlipat ganda. Ibu bapa pada <1.2em dan anak pada <1.2em akan memberikan saiz efektif kepada anak tersebut sebanyak <1.44em. Inilah sebabnya rem lebih diutamakan untuk saiz fon dalam kebanyakan kes — rem sentiasa merujuk kepada akar (root), jadi penyusunan tidak akan berlipat ganda.
Bila hendak menggunakan em: padding, margin, dan line-height pada komponen di mana anda mahu saiz mengikut saiz fon komponen itu sendiri. Elakkan em untuk saiz fon dalam komponen yang bersarang.
% — Peratus
Peratus sentiasa relatif kepada dimensi sepadan elemen ibu bapa. Peratus lebar adalah relatif kepada lebar ibu bapa; peratus tinggi adalah relatif kepada tinggi ibu bapa (dengan beberapa pengecualian).
Ia sangat berguna untuk susun atur dinamik: <width: 100% bermaksud "ambil semua lebar yang tersedia." Digunakan dengan max-width, ia menghasilkan bekas responsif:
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
Untuk saiz fon, peratus berkelakuan seperti em — ia berlipat ganda dengan ibu bapa. Gunakan rem sebagai ganti untuk hasil yang lebih boleh diramal.
vh, vw — Unit Viewport
<1vh = 1% daripada ketinggian viewport. <1vw = 1% daripada lebar viewport. Ini tidak bergantung pada mana-mana elemen — ia sentiasa merujuk kepada saiz tetingkap pelayar.
Bila hendak menggunakan unit viewport:
- Seksyen skrin penuh (Full-screen): <
height: 100vhuntuk bahagian hero yang memenuhi skrin dengan tepat - Tipografi dinamik (Fluid typography): <
font-size: clamp(1rem, 2.5vw, 2rem)untuk teks yang berubah saiz dengan lancar antara saiz skrin tanpa media queries - Imej atau video lebar penuh: <
width: 100vwuntuk keluar daripada bekas (container)
Masalah bar pelayar mudah alih:** Pada pelayar mudah alih, bar alamat muncul dan hilang apabila anda skrol, mengubah ketinggian viewport. <100vh boleh menyebabkan kandungan terpotong atau mewujudkan bar skrol. CSS menambah <dvh (dynamic viewport height), <svh (small — bar alamat kelihatan), dan <lvh (large — bar alamat tersembunyi) untuk mengendalikan perkara ini. Sokongan pelayar untuk dvh adalah baik pada 2024+. Gunakan <height: 100dvh untuk susun atur skrin penuh pada mudah alih.
Panduan Keputusan Unit CSS
| Apa yang anda saizkan | Gunakan ini | Mengapa |
|---|---|---|
| Saiz fon Badan / global | rem> | Menghormati pilihan pengguna, tiada penggabungan |
| Saiz fon Komponen | rem> | Konsisten, boleh diramal |
| Padding / margin Komponen | em atau <rem> | em jika anda mahu ia mengikut saiz fon; rem untuk konsistensi |
| Sempadan, bayangan kotak | px> | Tidak sepatutnya berubah saiz |
| Titik pemutus media query | px atau <em> | px untuk kesederhanaan; em supaya titik pemutus berubah dengan pilihan fon |
| Lebar bekas dinamik | % + <max-width> | Mengambil ruang yang ada, dihadkan pada maksimum |
| Seksyen hero ketinggian penuh | 100dvh> | Mengambil kira bar pelayar mudah alih |
| Tipografi dinamik | clamp() dengan rem + vw | Berubah saiz dengan lancar antara titik pemutus |
Kesilapan yang Paling Biasa
1. Menggunakan px untuk semua saiz fon. Ini merosakkan aksesibiliti. Pengguna yang meningkatkan saiz fon asas pelayar mereka akan mendapati teks anda tidak berubah. Gunakan rem untuk saiz fon supaya UI menghormati pilihan tersebut.
2. Menggunakan em untuk saiz fon dalam komponen bersarang. Masalah penggabungan berlaku di sini. Menu di dalam kad di dalam modal boleh berakhir dengan penggabungan 3x ganda. Gunakan rem untuk saiz fon.
3. Menggunakan vh untuk susun atur skrin penuh tanpa fallback dvh. Pada mudah alih, bar alamat menyebabkan anjakan susun atur. Gunakan <min-height: 100svh atau <height: 100dvh>.
4. Melupakan bahawa ketinggian % memerlukan ibu bapa dengan ketinggian yang jelas. <height: 100% pada anak tidak akan berfungsi jika ibu bapa mempunyai <height: auto>. Gunakan <vh atau flexbox sebagai ganti.
Formula Penukaran px → rem
Saiz fon akar lalai adalah 16px. Formula untuk menukar:
Contoh: <
24px ÷ 16 = 1.5rem
Jika anda bekerja dengan alat reka bentuk yang mengeluarkan piksel, Penukar PX ke REM kami mengendalikan pengiraan tersebut secara serta-merta. Tampal sebarang nilai px (atau senarai nilai) dan dapatkan setara rem, dengan sokongan untuk saiz akar tersuai.
Tukar px ke rem Serta-merta
Masukkan sebarang nilai piksel dan dapatkan padanan rem. Menyokong saiz fon asas tersuai.