คำแนะนำเกี่ยวกับ CSS Viewport Units vw, vh, vmin, vmax
ความยาวเปอร์เซ็นต์วิวพอร์ต, หรือ หน่วยของวิวพอร์ต เนื่องจากมีการอ้างถึงบ่อยกว่านั้นคือหน่วย CSS ที่ตอบสนองได้ซึ่งอนุญาตให้คุณกำหนดขนาด เป็นเปอร์เซ็นต์ของความกว้างหรือความยาวของวิวพอร์ต. หน่วย Viewport อาจมีประโยชน์ในกรณีที่หน่วย CSS ตอบสนองอื่น ๆ เช่นเปอร์เซ็นต์เป็น ยากที่จะทำงาน.
แม้ว่า เอกสารประกอบของ W3C ในหน่วยวิวพอร์ตมีทุกสิ่งที่สามารถนำไปใช้ในทางทฤษฎีได้มันไม่ได้มีความละเอียดมากนัก ดังนั้นในบทความนี้เราจะมาดูกันว่าหน่วย CSS เหล่านี้เป็นอย่างไร ทำงานในทางปฏิบัติ.
วิวพอร์ตความสูง (VH
) และความกว้างวิวพอร์ต (VW
)
W3C กำหนดวิวพอร์ต เช่น “ขนาดของบล็อกเริ่มต้นที่มี”. กล่าวอีกนัยหนึ่งวิวพอร์ตเป็นพื้นที่ มีอยู่ในหน้าต่างเบราว์เซอร์ หรือพื้นที่ดูอื่น ๆ บนหน้าจอ.
VW
และ VH
หน่วย ยืนสำหรับร้อยละของความกว้างและความสูงของวิวพอร์ตที่เกิดขึ้นจริง พวกเขาสามารถรับค่า ระหว่าง 0 ถึง 100 ตามกฎต่อไปนี้:
100vw = 100% ของความกว้างวิวพอร์ต 1vw = 1% ของความกว้างวิวพอร์ต 100vh = 100% ของความสูงวิวพอร์ต 1vh = 1% ของความสูงวิวพอร์ต
ความแตกต่างกับหน่วยเปอร์เซ็นต์
ดังนั้นหน่วยวิวพอร์ตแตกต่างจากหน่วยเปอร์เซ็นต์อย่างไร หน่วยเปอร์เซ็นต์ สืบทอดขนาดขององค์ประกอบหลักของพวกเขา ในขณะที่หน่วยวิวพอร์ตไม่ หน่วย Viewport จะคำนวณเป็นเสมอ เปอร์เซ็นต์ของขนาดวิวพอร์ต. ด้วยเหตุนี้องค์ประกอบที่กำหนดโดยหน่วยวิวพอร์ตสามารถเกินขนาดของพาเรนต์ได้.
ตัวอย่าง: ส่วนเต็มหน้าจอ
ส่วนแบบเต็มหน้าจอ อาจเป็นกรณีการใช้งานที่รู้จักกันอย่างกว้างขวางที่สุดของหน่วย viewport.
HTML ค่อนข้างง่าย; เราแค่มี สามส่วนภายใต้ซึ่งกันและกัน และเราต้องการให้แต่ละคน ครอบคลุมทั้งหน้าจอ (แต่ไม่มาก).
ใน CSS เราใช้ 100vh
เป็น ความสูง
คุณค่าและ 100%
เช่น ความกว้าง
. เราไม่ได้ใช้ VW
หน่วยที่นี่เป็นค่าเริ่มต้น, นอกจากนี้ยังมีการเพิ่มแถบเลื่อน กับขนาดวิวพอร์ต ดังนั้นถ้าเราใช้ ความกว้าง: 100vw;
กฎ แถบเลื่อนแนวนอน จะปรากฏที่ ด้านล่างของหน้าต่างเบราว์เซอร์.
* margin: 0; การเติมเต็ม: 0; ส่วน พื้นหลังขนาด: ปก; พื้นหลังตำแหน่ง: ศูนย์; ความกว้าง: 100%; ความสูง: 100vh; .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg'); .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');
ในตัวอย่าง gif ด้านล่างคุณจะเห็นได้ว่า VH
คือ หน่วยที่ตอบสนองอย่างแท้จริง.
ตามเอกสาร W3C ดังกล่าวข้างต้น ปัญหาแถบเลื่อนแนวนอน สามารถแก้ไขได้โดยการเพิ่ม ล้น: อัตโนมัติ;
กฎเพื่อองค์ประกอบราก ทางออกนี้ ใช้งานได้เพียงบางส่วน, แม้ แถบเลื่อนแนวนอนแน่นอนหายไป แต่ ความกว้าง
คือ ยังคงคำนวณตามความกว้างของวิวพอร์ต (รวมแถบด้านข้าง) ดังนั้นองค์ประกอบจะใหญ่กว่าที่ควรจะเป็นเล็กน้อย.
ฉันจะบอกว่าฉันจะไม่กล้าใช้ VW
หน่วยบน การปรับขนาดองค์ประกอบแบบเต็มหน้าจอ เนื่องจากเหตุผลนี้ เราไม่ต้องการมันด้วยซ้ำ ความกว้าง: 100%;
กฎทำงานได้อย่างสมบูรณ์แบบ ด้วยรูปแบบเต็มหน้าจอความท้าทายที่แท้จริงคือวิธีการ ตั้งค่าความสูงที่เหมาะสม และ VH
หน่วยให้โซลูชั่นที่ยอดเยี่ยมสำหรับการที่.
กรณีใช้งานอื่น ๆ
หากคุณสนใจ กรณีการใช้งานอื่น ๆ VW
และ VH
Lullabot มีบทความที่ดีที่แสดงรายการ ตัวอย่างจากชีวิตจริงจำนวนหนึ่ง (ด้วยการสาธิต Codepen) เช่น:
- บัตรอัตราส่วนคงที่.
- ทำให้องค์ประกอบสั้นกว่าหน้าจอ.
- ปรับขนาดข้อความ.
- แตกออกจากภาชนะ.
Opera.dev ยังมีบทช่วยสอนสั้น ๆ เกี่ยวกับวิธีการใช้ประโยชน์จาก VW
หน่วยใน สร้างตัวอักษรตอบสนอง.
คุณไม่สามารถใช้หน่วยวิวพอร์ตใน ความกว้าง
และ ความสูง
คุณสมบัติ แต่ในที่อื่น ๆ ตัวอย่างเช่นคุณสามารถ กำหนดขนาดของการขยายและระยะขอบ ใช้ VW
และ VH
หน่วยเกินไป.
วิวพอร์ตขั้นต่ำ (vmin
) & วิวพอร์ตสูงสุด (VMax
)
vmin
และ VMax
หน่วยช่วยให้คุณเข้าถึง ขนาดของด้านที่เล็กกว่าหรือใหญ่กว่า ของวิวพอร์ตตามกฎต่อไปนี้:
100vmin = 100vw หรือ 100vh แล้วแต่จำนวนใดจะน้อยกว่า 1vmin = 1vw หรือ 1vh แล้วแต่จำนวนใดจะเล็กกว่า 100vmax = 100vw หรือ 100vh แล้วแต่จำนวนใดจะใหญ่กว่า 1vmax = 1vw หรือ 1vh แล้วแต่จำนวนใดจะใหญ่กว่า
ดังนั้นในกรณีของ การวางแนวแนวตั้ง, 100vmin
เท่ากับ 100vw
, ตามที่วิวพอร์ตคือ แนวนอนเล็กกว่าแนวตั้ง. ด้วยเหตุผลเดียวกัน, 100vmax
จะเท่ากับ 100vh
.
ในทำนองเดียวกันในกรณีของ การวางแนวแนวนอน, 100vmin
เท่ากับ 100vh
, ตามที่วิวพอร์ตคือ เล็กกว่าแนวตั้ง. และแน่นอน, 100vmax
จะเท่ากับ 100vw
ที่นี่.
ตัวอย่าง: ทำให้ข้อความของฮีโร่อ่านได้ทุกหน้าจอ
vmin
และ VMax
หน่วยเป็นที่รู้จักน้อยกว่า VW
และ VH
. อย่างไรก็ตามพวกเขาสามารถใช้เป็นเลิศ แทนการปฐมนิเทศ @ สื่อ
คำสั่ง. ตัวอย่างเช่น, vmin
และ VMax
สามารถมีประโยชน์เมื่อคุณมีองค์ประกอบที่อาจดูแปลก ที่อัตราส่วนกว้างยาวต่างกัน.
รหัสใหม่มีบทช่วยสอนที่ดีซึ่งพวกเขาจะพูดถึงวิธีการที่คุณทำได้ ทำให้ข้อความของฮีโร่อ่านได้ ในทุกหน้าจอโดยใช้ vmin
หน่วย ตำราฮีโร่มีแนวโน้มที่จะมอง เล็กเกินไปบนมือถือและใหญ่เกินไปบนจอภาพขนาดใหญ่.
นี่คือแนวคิดหลักของการแก้ปัญหาของพวกเขา:
h1 ขนาดตัวอักษร: 20v นาที; font-family: Avenir, sans-serif; น้ำหนักตัวอักษร: 900; จัดข้อความ: ศูนย์;
ในการสาธิต Codepen คุณสามารถตรวจสอบได้อย่างไร vmin
แก้ปัญหาการอ่านของตำราฮีโร่ เข้าถึง “เต็มหน้า” ดูบน Codepen แล้ว ปรับขนาดหน้าต่างเบราว์เซอร์ของคุณ ทั้งในแนวนอนและแนวตั้งเพื่อดูการเปลี่ยนแปลงของข้อความฮีโร่.
รองรับเบราว์เซอร์
อย่างที่คุณเห็นในแผนภูมิ CanIUse ด้านล่าง, การสนับสนุนเบราว์เซอร์ค่อนข้างดี สำหรับหน่วยวิวพอร์ต อย่างไรก็ตามโปรดทราบว่า IE และ Edge บางรุ่นไม่รองรับ VMax
. นอกจากนี้ iOS 6 และ 7 ยังมีปัญหากับ VH
หน่วย, ซึ่งได้รับการแก้ไขใน iOS 8.