Unit CSS - Apa perbedaan antara vh / vw dan%?

Question 1

Saya baru saja belajar tentang unit CSS baru dan tidak umum. vhdan vwmengukur masing-masing persentase tinggi dan lebar viewport.

Saya melihat pertanyaan ini dari Stack Overflow, tetapi itu membuat unit terlihat lebih mirip.

Bagaimana cara kerja unit vw dan vh

Jawabannya secara spesifik mengatakan

vw dan vh adalah persentase dari lebar dan tinggi jendela, masing-masing: 100vw adalah 100% dari lebar, 80vw adalah 80%, dll.

Ini sepertinya sama persis dengan %unit, yang lebih umum.

Di Alat Pengembang, saya mencoba mengubah nilai dari vw / vh menjadi% dan sebaliknya dan mendapatkan hasil yang sama.

Apakah ada perbedaan diantara keduanya? Jika tidak, mengapa unit baru ini diperkenalkan CSS3?

Question 2

100%bisa 100%setinggi apapun. Misalnya, jika saya memiliki orang tua divyang 1000pxtinggi, dan anak divyang 100%tingginya, maka anak divitu secara teoritis bisa jauh lebih tinggi daripada tinggi viewport, atau jauh lebih kecil dari tinggi viewport, meskipun itu divditetapkan pada 100%tinggi .

Jika saya malah membuat anak itu divdisetel ke 100vh, maka itu hanya100% akan mengisi tinggi viewport , dan tidak harus induknya div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Luaskan cuplikan

Question 3

Saya tahu pertanyaannya sudah sangat lama dan @Josh Beam membahas perbedaan terbesar, tetapi masih ada satu lagi:

Misalkan Anda memiliki <div>, anak langsung <body>yang Anda ingin mengisi seluruh viewport, jadi Anda gunakan width: 100vw; height: 100vh;. Semuanya berfungsi sama seperti width: 100%; height: 100vh;sampai Anda menambahkan lebih banyak konten dan scrollbar vertikal muncul. Karena vwakun scrollbar sebagai bagian dari viewport, width: 100vw;akan sedikit lebih besar dari width: 100%;. Perbedaan kecil ini akhirnya menambahkan scrollbar horizontal (diperlukan bagi pengguna untuk melihat sedikit lebar ekstra itu) dan akibatnya, tingginya juga akan sedikit berbeda pada kedua kasus.

Itu harus dipertimbangkan saat memutuskan mana yang akan digunakan, meskipun ukuran elemen induk sama dengan ukuran area pandang dokumen.

Contoh:

Menggunakan width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Luaskan cuplikan

Menggunakan width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Luaskan cuplikan

Question 4

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.

Question 5

unit vw (view-width) dan vh (view-height) berhubungan dengan ukuran view-port, di mana 100vw atau vh adalah 100% dari lebar / tinggi view-port.

Misalnya, jika port tampilan berukuran lebar 1600 piksel, dan Anda menentukan sesuatu sebagai 2vw, itu akan setara dengan 2% dari lebar port tampilan, atau 32 piksel.

% unit selalu didasarkan pada lebar elemen induk dari elemen saat ini

Question 6

Ada perbedaan yang belum tentu dimunculkan. 100vw mencakup lebar bilah scrool, sedangkan 100% tidak menyertakannya. Ini adalah perbedaan kecil, tetapi penting saat melakukan desain.