CSS memiliki beberapa unit yang berbeda untuk mengekspresikan panjang a.
Banyak properti CSS mengambil "length" nilai-nilai, seperti lebar, margin, padding, font-size, border-width, dll
Panjang adalah nomor yang diikuti oleh satuan panjang, seperti 10px, 2em, dll
Sebuah spasi tidak dapat muncul antara jumlah dan unit. Namun, jika nilai adalah 0, unit dapat dihilangkan.
Untuk beberapa properti CSS, panjang negatif diperbolehkan.
Ada dua jenis unit panjang: relatif dan absolut.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung satuan panjang.
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27,0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0 * | 19.0 | 6.0 | 20.0 |
| vmax | 26,0 | Tidak didukung | 19.0 | Tidak didukung | 20.0 |
Note: Internet Explorer 9 mendukung Vmin dengan nama non-standar: vm.
Panjang relatif
unit panjang relatif menentukan panjang relatif terhadap properti panjang lain. unit panjang relatif skala yang lebih baik antara media rendering yang berbeda.
| em | Sehubungan dengan font-size dari elemen (2em means 2 times the size of the current font) Cobalah |
| ex | Sehubungan dengan x-height dari font saat ini (rarely used) Cobalah |
| ch | Sehubungan dengan lebar dari "0" (zero) |
| rem | Sehubungan dengan font-size dari elemen root |
| vw | Sehubungan dengan 1% dari lebar viewport * Cobalah |
| vh | Sehubungan dengan 1% dari ketinggian viewport * Cobalah |
| vmin | Sehubungan dengan 1% dari viewport ini * dimensi lebih kecil Cobalah |
| vmax | Sehubungan dengan 1% dari viewport ini * dimensi lebih besar Cobalah |
| % |
Tip: em The dan rem unit praktis dalam menciptakan tata letak sempurna scalable!
* Viewport = ukuran jendela browser. Jika viewport adalah 50cm lebar, 1vw = 0.5cm.
Absolute Panjang
Unit panjang absolut tetap dan panjang yang dinyatakan dalam semua ini akan muncul sebagai persis ukuran.
unit panjang mutlak tidak dianjurkan untuk digunakan pada layar, karena ukuran layar bervariasi begitu banyak. Namun, mereka dapat digunakan jika media keluaran diketahui, seperti untuk tata letak cetak.
* Pixels (px) yang relatif terhadap perangkat tampilan. Untuk perangkat low-dpi, 1px adalah salah satu perangkat pixel (dot) layar. Untuk printer dan layar resolusi tinggi 1px menyiratkan beberapa piksel perangkat.
Terima kasih atas jawaban dan contoh kode Anda, @IanC. Itu sangat membantu saya. Klarifikasi: Saya yakin yang Anda maksud adalah "scrollbar" saat Anda menulis "sidebar".
Berikut adalah beberapa diskusi terkait tentang unit area pandang yang menghitung bilah gulir yang menurut saya berguna:
Spesifikasi W3C untuk unit vw, vh, vmin, vmax ("panjang persentase viewport") mengatakan "semua scrollbar diasumsikan tidak ada".
Rupanya Firefox mengurangi lebar scrollbar dari 100vw, seperti komentar @ Nolonar di Perbedaan antara Lebar: 100% dan lebar: 100vw? mengamati, mengutip "Can I Use".
Can I Use , mungkin karena ketegangan dengan spesifikasi (?), Mengatakan semua browser selain Firefox saat ini "salah" menganggap 100vw sebagai lebar halaman secara keseluruhan termasuk scroll bar vertikal.
Saat mendesain saya memakai px karena tidak ada satuan lain di Sketch/Figma/dsb.
Saat bermain CSS saya mulai memakai rem karena tidak perlu pusing, dulunya masih memakai em.
Secara umum alias kalau tidak diganti-ganti, 16px itu sebanding dengan 1em atau 1rem.
pixel
Ukuran px selalu fix.
em
Ukuran em dipengaruhi oleh elemen yang membungkusnya. Misal:
<style> div {font-size: 24px} div > strong {font-size: .5em} div > small {font-size: 2em} div > strong, div > small {display: block} </style> <div> <strong>teks tebal</strong> <small>teks kecil</small>
</div>
Elemen <strong> memiliki ukuran .5em atau 0.5∗24px=12px. Elemen <small> memiliki ukuran 2em atau 2∗24px=48px.
Kalau saya mengganti ukuran font di <div>, misal dijadikan menjadi 10px, perbandingan keduanya adalah ini:
rem (root em)
Ukuran rem (root em) dipengaruhi oleh root alias <html>. Misal saya mengatur ukuran huruf dokumen html ini sebesar 24px, lalu elemen <div> memiliki ukuran 2px, dan elemen <p> yang ada di dalam <div> berukuran 2rem, bagaimana tampilannya?
<style>html {font-size: 24px}div {font-size: 2px}div > p {font-size: 2.5rem}</style><div><p>teks</p>
</div>
Karena saya memakai rem, jadi ukuran font yang ada di <div> tidak mempengaruhi apa-apa. teks di dalam <p> itu sendiri berukuran 2.5rem ∗ (root size) = 2.5 ∗ 24px = 60px.
Saya mulai memilih rem karena cukup ada 1 ukuran saja yang diatur, yaitu yang ada di <html>. Oh iya, rem tidak hanya saya pakai untuk font-size saja, tapi juga hal lain macam padding, margin, dsb.
Penggunaan rem ini juga memudahkan untuk membuatnya responsif, misal:
@media (max-width: 575px) {html {font-size: 12px;}}@media (min-width: 576px) and (max-width: 767px) {html {font-size: 14px;}}@media (min-width: 768px) and (max-width: 991px) {html {font-size: 16px;}}@media (min-width: 992px) {html {font-size: 18px;}}.row {margin-left: 1rem; margin-right: 1rem}.col {padding-left: 1rem; padding-right: 1rem}
img.logo {width: 2rem; height: auto}
… dan ukuran-ukuran rem tinggal mengikuti ukuran di atas.
Untuk kasus tertentu, saya juga memakai vh dan vw yang ukurannya relatif dengan ukuran viewport, misalnya saat berurusan dengan hero.
Catatan: Ini adalah salinan jawaban saya di Quora. Saya akan menulis ulang jawaban yang saya suka di Quora ke dalam blog saya.
53 people enjoyed this post
Udah lama gak ngoprek CSS dan gak nge-blog juga. Padahal baru kemarin nulis di blog. Sekarang bahas apa? Bahas CSS unit aja. Udah tau satuan px (pixel) kan? Sekarang mari bahas satuan vw dan vh atau satuan viewport dari CSS3. Sebenernya udah ada sejak lama, tapi baru dipake kemaren -_-"
Konsep dari vw dan vh itu adalah: mewakili persentase dari tampilan lebar dan tinggi browser. Jadi, kalau kita memasukan value 80vw, artinya lebar dari elemen tersebut sama dengan 80% dari lebar window browser, yang vh juga sama, bedanya dia representasi dari tinggi window browser.
1vw = 1/100 (1%) dari lebar window browser
10vw = 10/100 (10%) dari lebar window browser
50vh = 50/100 (50%) dari tinggi window browser
Apa bedanya dengan satuan persen?
Beda dari satuan persen (%) adalah, satuan persen mengacu pada inheritance dari parent, atau diukur berdasarkan lebar / tinggi dari parent. Misal, tag header memiliki lebar 800px, maka tag apapun yang ada di dalam header akan memiliki persentase dari 800px.
Sekarang, apa bedanya dengan em?
em biasa digunakan untuk font, nilai yang digunakan adalah "bagaimana browser atau device menampilkan ukuran font secara native, pendeknya ukuran font ditentukan oleh browser atau device itu sendiri."
Kalau masih kurang mudeng, silakan simak demo dibawah dan coba resize lebar dari browser
Atau buka link ini //codepen.io/sendz/full/cbDpf untuk lihat hasil dengan full-size. [codepen_embed height="259" theme_id="0" slug_hash="cbDpf" default_tab="css" user="sendz"] .container { width: 800px; background-color: #333; padding: 5px; margin: 10px 0px;
}