หน่วย CSS - vh / vw และ% ต่างกันอย่างไร

Question 1

ฉันเพิ่งเรียนรู้เกี่ยวกับหน่วย CSS ใหม่และไม่ธรรมดา vhและvwวัดเปอร์เซ็นต์ของความสูงและความกว้างของวิวพอร์ตตามลำดับ

ฉันดูคำถามนี้จาก Stack Overflow แต่มันทำให้หน่วยดูคล้ายกันมากขึ้น

หน่วย vw และ vh ทำงานอย่างไร

คำตอบกล่าวโดยเฉพาะ

vw และ vh เป็นเปอร์เซ็นต์ของความกว้างและความสูงของหน้าต่างตามลำดับ: 100vw คือ 100% ของความกว้าง 80vw คือ 80% เป็นต้น

ดูเหมือนว่าจะเหมือนกับ%หน่วยซึ่งพบได้บ่อย

ในเครื่องมือสำหรับนักพัฒนาฉันได้ลองเปลี่ยนค่าจาก vw / vh เป็น% และในทางกลับกันและได้ผลลัพธ์เดียวกัน

มีความแตกต่างระหว่างทั้งสองหรือไม่? ถ้าไม่ทำไมถูกหน่วยใหม่เหล่านี้นำไปCSS3?

Question 2

100%อาจมี100%ความสูงเท่าไหร่ก็ได้ ตัวอย่างเช่นหากฉันมีพ่อแม่divที่ตัว1000pxสูงและเด็กdivที่มี100%ความสูงเด็กคนdivนั้นในทางทฤษฎีอาจสูงกว่าความสูงของวิวพอร์ตมากหรือน้อยกว่าความสูงของวิวพอร์ตแม้ว่าdivจะตั้งไว้ที่100%ความสูง .

ถ้าฉันdivตั้งค่าลูกนั้นไว้ที่100vhแทนมันจะเติมเต็ม100%ความสูงของวิวพอร์ตเท่านั้นและไม่จำเป็นต้องเป็นระดับ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>

ขยายข้อมูลโค้ด

Question 3

ฉันรู้ว่าคำถามนี้เก่ามากและ @Josh Beam พูดถึงความแตกต่างที่ยิ่งใหญ่ที่สุด แต่ยังมีอีกคำถามหนึ่ง:

สมมติว่าคุณมี<div>เด็กโดยตรง<body>ที่คุณต้องการกรอก viewport width: 100vw; height: 100vh;ทั้งเพื่อให้คุณใช้ ทุกอย่างทำงานได้เหมือนเดิมwidth: 100%; height: 100vh;จนกว่าคุณจะเพิ่มเนื้อหาเพิ่มเติมและแถบเลื่อนแนวตั้งจะปรากฏขึ้น ตั้งแต่vwการบัญชีสำหรับเลื่อนเป็นส่วนหนึ่งของวิวพอร์ตจะมีขนาดใหญ่กว่าเล็กน้อยwidth: 100vw; width: 100%;ความแตกต่างเล็กน้อยนี้จะจบลงด้วยการเพิ่มแถบเลื่อนแนวนอน (จำเป็นสำหรับผู้ใช้เพื่อให้เห็นความกว้างที่เพิ่มขึ้นเล็กน้อยนั้น) และด้วยเหตุนี้ความสูงก็จะแตกต่างกันเล็กน้อยในทั้งสองกรณี

สิ่งนี้ต้องนำมาพิจารณาในการตัดสินใจว่าจะใช้องค์ประกอบใดแม้ว่าขนาดองค์ประกอบหลักจะเหมือนกับขนาดวิวพอร์ตของเอกสารก็ตาม

ตัวอย่าง:

ใช้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>

ขยายข้อมูลโค้ด

ใช้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>

ขยายข้อมูลโค้ด

Question 4

ขอบคุณสำหรับคำตอบและตัวอย่างโค้ด @IanC มันช่วยฉันได้มาก คำชี้แจง: ฉันเชื่อว่าคุณหมายถึง "แถบเลื่อน" เมื่อคุณเขียน "แถบด้านข้าง"

นี่คือการอภิปรายที่เกี่ยวข้องบางส่วนเกี่ยวกับหน่วยวิวพอร์ตนับแถบเลื่อนที่ฉันพบว่ามีประโยชน์:

ข้อกำหนดW3Cสำหรับหน่วย vw, vh, vmin, vmax ("ความยาวเปอร์เซ็นต์วิวพอร์ต") ระบุว่า "แถบเลื่อนใด ๆ จะถือว่าไม่มีอยู่"

เห็นได้ชัดว่า Firefox ลบความกว้างของแถบเลื่อนออกจาก 100vw เนื่องจากความคิดเห็นของ @Nolonar ที่ความแตกต่างระหว่างความกว้าง: 100% และความกว้าง: 100vw? สังเกตโดยอ้างว่า "ฉันใช้ได้ไหม"

ฉันสามารถใช้ได้หรือไม่ซึ่งอาจมีความตึงเครียดกับข้อมูลจำเพาะ (?) กล่าวว่าเบราว์เซอร์ทั้งหมดที่ไม่ใช่ Firefox "ไม่ถูกต้อง" ถือว่า 100vw เป็นความกว้างของหน้าทั้งหมดรวมทั้งแถบเลื่อนแนวตั้งด้วย

Question 5

หน่วย vw (view-width) และ vh (view-height) สัมพันธ์กับขนาดวิวพอร์ตโดยที่ 100vw หรือ vh คือ 100% ของความกว้าง / ความสูงของวิวพอร์ต

ตัวอย่างเช่นหากมุมมองพอร์ตกว้าง 1600px และคุณระบุบางอย่างว่าเป็น 2vw นั่นจะเท่ากับ 2% ของความกว้างมุมมองพอร์ตหรือ 32px

หน่วย% จะขึ้นอยู่กับความกว้างขององค์ประกอบหลักขององค์ประกอบปัจจุบันเสมอ

Question 6

มีความแตกต่างที่ไม่จำเป็นต้องได้รับการเลี้ยงดู 100vw รวมความกว้างของแถบ scrool ในขณะที่ 100% ไม่รวมมัน มันเป็นความแตกต่างเล็ก ๆ น้อย ๆ แต่สำคัญเมื่อทำการออกแบบ