คำแนะนำเกี่ยวกับ 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.