: vw, vh และ vmin เมื่อเร็ว ๆ นี้ Chrome เวอร์ชัน dev (หมายเลข 20) ก็รองรับเช่นกัน และทำให้มีความหวังว่านักพัฒนาเบราว์เซอร์อื่นจะปฏิบัติตามตัวอย่างนี้ อันที่จริงสิ่งนี้จะมีประโยชน์เพราะสะดวกและใช้งานได้จริงและฉันจะพยายามบอกคุณว่าทำไมถึงเป็นเช่นนั้น

ทำไมมันเจ๋งแบบนี้ล่ะ?

เหตุผลหลายประการ นี่คือสองคน:

1. มีสิ่งเช่นความยาวของบรรทัดข้อความที่อ่านได้สบาย ฉันไม่ต้องการเริ่มสงครามโฮลีวาร์ แต่สมมติว่ามีอักขระ 80 ตัว ดังนั้นหน่วยการวัดเหล่านี้จึงช่วยให้คุณรักษาค่านี้ไว้บนหน้าจอทุกขนาดได้
2. นอกจากนี้ยังสามารถปรับความสัมพันธ์ระหว่างชื่อเรื่องและข้อความเนื้อหาได้ เช่นเดียวกับในโพสต์ของ Trent Walton

มันทำงานอย่างไร?

หน่วยของแต่ละค่าทั้งสามนี้คือ 1% ของขนาดหน้าจอ ตัวอย่างเช่น หากขนาดหน้าจอกว้าง 40 เซนติเมตร 1vw จะเท่ากับ 0.4 ซม.

1vw= ความกว้างหน้าต่าง 1%
1vh= ความสูงของหน้าต่าง 1%
1vนาที= 1vw หรือ 1vh แล้วแต่จำนวนใดจะน้อยกว่า

การใช้งาน

โอ้ มันง่ายมาก:

H1 (ขนาดตัวอักษร: 5.9vw; ) h2 (ขนาดตัวอักษร: 3.0vh; ) p (ขนาดตัวอักษร: 2vmin; )

รองรับเบราว์เซอร์

โครเมียม 20+และ ไออี 10+
ฉันตรวจสอบใน Opera Next (12), Safari 5.2 และ Firefox Beta (13) แล้ว - ไม่มีประโยชน์

การสาธิต

วิดีโอสั้น ๆ ที่แสดงการใช้ vw:

คุณสามารถลองด้วยตัวเอง (ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ของคุณรองรับหน่วยการวัดเหล่านี้)

แมลง

มีการรองรับใน Chrome 20 แต่ก็มีความไม่สมดุลเล็กน้อย เมื่อหน้าต่างเบราว์เซอร์ถูกปรับขนาด แบบอักษรจะไม่ปรับให้พอดีกับขนาดหน้าต่างใหม่ ข้อกำหนดบอกว่า:

หากความสูงหรือความกว้างของหน้าต่างเปลี่ยนแปลง หน้าต่างจะถูกปรับขนาดตามนั้น

ฉันส่งคำขอไปยังเครื่องมือติดตามบั๊ก บางทีนี่อาจไม่ใช่ปัญหาใหญ่ แบบอักษรยังคงเปลี่ยนแปลงเมื่อโหลดหน้าที่ "สะอาด" สิ่งเล็กๆ น้อยๆ เหล่านี้เป็นเพียงสิ่งที่น่าสนใจสำหรับเราเท่านั้น ผู้รักการออกแบบที่ปฏิบัติต่อสิ่งเหล่านั้นอย่างระมัดระวัง แต่ยังคง

ในการแก้ไขปัญหานี้ (อนุญาตให้ปรับขนาดโดยไม่ต้องโหลดหน้าซ้ำ) คุณต้องบังคับให้องค์ประกอบวาดใหม่ ฉันใช้ jQueryและเพิ่งทดลองกับค่าดัชนี z ของแต่ละองค์ประกอบที่ทำให้เกิดการวาดใหม่

CauseRepaintsOn = $("h1, h2, h3, p"); $(window).resize(function() ( CauseRepaintsOn.css("z-index", 1); ));

ไม่ใช่แค่ขนาดตัวอักษรเท่านั้น

อย่างไรก็ตาม นี่เป็นเพียงบางส่วนเท่านั้น เช่น em , px อะไรก็ตาม คุณสามารถใช้ได้ทุกที่ ไม่จำกัดเพียงขนาดตัวอักษร

ใช้มัน!

การใช้งานพื้นเมือง

อย่าลืมโทรกลับสำหรับเบราว์เซอร์ที่ยังไม่รองรับหน่วยเหล่านี้:

H1 (ขนาดตัวอักษร: 36px; ขนาดตัวอักษร: 5.4vw; )

รองรับการตรวจสอบ

Modernizr ยังไม่มีการทดสอบสำหรับการตรวจสอบนี้ แต่คุณสามารถตรวจสอบได้ด้วยตัวเองโดยใช้สคริปต์ JS ขนาดเล็ก

วาร์ testEl = $("#vw-test"); var วิวพอร์ต = $(หน้าต่าง); testEl.css(( ความกว้าง: "100vw" )); if (testEl.width() == viewport.width()) ( $("html").addClass("vw-support"); ) else ( $("html").append("vw-unsupported") ;

เลียนแบบฟังก์ชันการทำงานด้วย FitText.js

แนวคิดนี้คือเชื่อมโยงความกว้างโดยรวมของส่วนหัวกับความกว้าง องค์ประกอบหลักซึ่งเป็นสิ่งที่ FitText.js ทำ จริงอยู่ เขาทำสิ่งนี้ผ่าน Javascript, คณิตศาสตร์, สแปนแท็ก และอื่นๆ อีกมากมาย ตามทฤษฎีแล้ว คุณสามารถดำเนินการตรวจสอบและใช้ Modernizr.load เพื่อโหลด FitText.js ได้ หากไม่พบการสนับสนุน

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

หน่วยวิวพอร์ต

หน่วยวิวพอร์ตเป็นหน่วยสัมพัทธ์ ซึ่งหมายความว่าไม่สามารถวัดได้อย่างเป็นกลาง ขนาดของมันถูกกำหนดโดยขนาดของวิวพอร์ตของเบราว์เซอร์ มีสี่หน่วยที่เกี่ยวข้องกับวิวพอร์ต

ฉันจะเน้นไปที่สองอันแรกเนื่องจากเป็นอันที่ใช้บ่อยที่สุด ในหลายกรณี หน่วยวิวพอร์ต (vh และ vw) ซ้อนทับกับเปอร์เซ็นต์ในแง่ของความสามารถ อย่างไรก็ตามแต่ละคนมีจุดแข็งและจุดอ่อนของตัวเอง

โดยสรุปดูเหมือนว่านี้:

เมื่อต้องรับมือกับความกว้าง % จะดีกว่า และเมื่อต้องรับมือกับความสูง vh จะดีกว่า

องค์ประกอบความกว้างหน้าเต็ม: % > vw

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

หากความกว้างของหน้าเกินความกว้างของวิวพอร์ต แถบเลื่อนจะปรากฏขึ้น อย่างไรก็ตาม ในความเป็นจริงแล้ว ความกว้างของวิวพอร์ตจะมากกว่าความกว้างขององค์ประกอบ html

วิวพอร์ต > html > เนื้อหา

ดังนั้น หากคุณตั้งค่าความกว้างขององค์ประกอบเป็น 100vw องค์ประกอบจะขยายเกิน html และเนื้อหา วี ในตัวอย่างนี้ฉันสร้างเส้นขอบสีแดงรอบๆ องค์ประกอบ html และเติมสีต่างๆ ให้กับส่วนต่างๆ

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

องค์ประกอบความสูงของหน้าเต็ม: vh > %

เมื่อสร้างองค์ประกอบที่ต้องมีความสูงเท่ากับหน้า จะเป็นการดีกว่ามากถ้าใช้ vh แทนเปอร์เซ็นต์ เนื่องจากขนาดเปอร์เซ็นต์ขององค์ประกอบสัมพันธ์กับองค์ประกอบหลัก เราจึงสามารถรับความสูงขององค์ประกอบได้ ความสูงเท่ากันหน้าจอเฉพาะในกรณีที่องค์ประกอบหลักใช้ความสูงทั้งหมดของหน้าจอด้วย ซึ่งหมายความว่าเราต้องวางตำแหน่งองค์ประกอบให้คงที่เพื่อที่จะทำ องค์ประกอบ HTMLผู้ปกครองหรือหันไปใช้แฮ็คบางประเภท

การใช้ vh เพื่อให้ได้เอฟเฟกต์นี้ค่อนข้างง่าย:

ตัวอย่าง ( ความสูง: 100vh; )

ไม่ว่าองค์ประกอบ .example จะซ้อนกันอย่างไร ก็สามารถตั้งค่ามิติให้สัมพันธ์กับขนาดของวิวพอร์ตได้ ปัญหาการเลื่อนจะไม่รบกวนเราเนื่องจากไซต์ส่วนใหญ่ไม่มีแถบเลื่อนแนวนอน

ต่อไปนี้เป็นตัวอย่างวิธีการใช้หน่วย vh

ภาพพื้นหลังแบบเต็มหน้าจอ

การใช้งานทั่วไปของหน่วย vh คือการสร้าง ภาพพื้นหลังซึ่งครอบคลุมความสูงและความกว้างทั้งหมดของหน้าจอ ไม่ว่าอุปกรณ์จะมีขนาดเท่าใดก็ตาม มันค่อนข้างง่ายที่จะทำ

Bg ( ตำแหน่ง: ญาติ; พื้นหลัง: url("bg.jpg") ตรงกลาง/ปก; ความกว้าง: 100%; ความสูง: 100vh; )

ในทำนองเดียวกัน เราสามารถสร้างเอฟเฟ็กต์ "หน้า" ได้โดยให้แต่ละส่วนมีมิติของวิวพอร์ต

ส่วน (กว้าง: 100%; สูง: 100vh; )

เราสามารถใช้ JavaScript เพื่อสร้างภาพลวงตาของการเปลี่ยนหน้าได้

$("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). เคลื่อนไหว (( scrollTop: movePos ), 1,000 ))

ภาพพับ

Vh ยังสามารถใช้เพื่อควบคุมขนาดของรูปภาพภายในเพจได้ เช่น ภายในกรอบของบทความ เราต้องการให้แน่ใจว่าภาพใดๆ ก็ตามจะแสดงอย่างครบถ้วนโดยไม่คำนึงถึงขนาดหน้าจอ

เราจะต้องมีรหัสต่อไปนี้

Img ( width: auto; /* ความกว้างอัตโนมัติเป็นสัดส่วนกับความสูง */ ความกว้างสูงสุด: 100%; /* ไม่ใช่ ความกว้างมากขึ้นองค์ประกอบหลัก */ ความสูงสูงสุด: 90vh; /* ไม่เกินความสูงของวิวพอร์ต */ ระยะขอบ: 2rem อัตโนมัติ; -

รองรับเบราว์เซอร์

เนื่องจากหน่วยเหล่านี้ค่อนข้างใหม่ จึงยังคงมีปัญหากับเบราว์เซอร์บางตัว

ต่อไปนี้เป็นวิธีการแก้ปัญหา

หน่วย มิติข้อมูล CSSเล่น บทบาทที่สำคัญในการสร้างและปรับขนาดเว็บไซต์ องค์ประกอบต่างๆ. ค่าซีเอสเอสสามารถแสดงเป็นจำนวนบวกหรือลบได้ แม้ว่าคุณสมบัติบางอย่างจะใช้เพียงเท่านั้น ตัวเลขบวก. ค่าตัวเลขพร้อมด้วยตัวย่อสองตัวที่แสดงถึงหน่วยความยาวจริง ตัวอย่างเช่น ซม. (เซนติเมตร), px (พิกเซล) หรือ em CSS ข้อยกเว้นสำหรับกฎนี้คือค่า 0 (ศูนย์) ซึ่งไม่จำเป็นต้องใช้หน่วยวัด

หน่วย CSS มีสองประเภท: แบบสัมบูรณ์และแบบสัมพัทธ์

หน่วยความยาวสัมบูรณ์ใน CSS

หน่วย CSS สัมบูรณ์ไม่เหมาะสำหรับการออกแบบเว็บไซต์ เป็นตัวแทนการนำเสนอผลการวัดในโลกทางกายภาพในรูปแบบดิจิทัล และไม่ขึ้นกับขนาดและความละเอียดของหน้าจอ ความยาวสัมบูรณ์ที่มีค่าเท่ากันอาจแตกต่างกัน หน้าจอที่แตกต่างกัน- สาเหตุนี้เกิดจากความแตกต่างของ DPI ของหน้าจอ (จุดต่อนิ้ว)

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

หน่วยวัดความยาวสัมบูรณ์:

• ซม. (เซนติเมตร);
• มม. (มิลลิเมตร);
• ใน (นิ้ว);
• พีซี(พีค);
• จุด (คะแนน);
• พิกเซล (พิกเซล)

หน่วยความยาวสัมบูรณ์ส่วนใหญ่ไม่มีประโยชน์บนอินเทอร์เน็ต ข้อยกเว้นเพียงอย่างเดียวคือ px พิกเซลเป็นหน่วยสัมพันธ์กับความละเอียดของหน้าจอ สำหรับเครื่องพิมพ์และจอภาพเป็นอย่างมาก ความละเอียดสูงหนึ่งพิกเซลใน CSS เท่ากับหลายพิกเซลบนหน้าจอ ดังนั้นจำนวนพิกเซลต่อนิ้วจึงอยู่ที่ประมาณ 96 พิกเซลเป็นหน่วยวัดที่เล็กที่สุด และมักใช้เป็นข้อมูลอ้างอิงสำหรับหน่วยอื่นๆ

หน่วยความยาวสัมพัทธ์ใน CSS

หน่วยสัมพัทธ์ขนาดความยาวใน CSS ไม่มีค่าคงที่ ความหมายของพวกเขาขึ้นอยู่กับผู้อื่น ตั้งค่าหรือฟังก์ชันต่างๆ พวกมันได้รับความนิยมมากกว่าในการออกแบบเว็บเพราะทำให้ง่ายต่อการกำหนดขนาดขององค์ประกอบ ด้วยความช่วยเหลือเหล่านี้ คุณสามารถตั้งค่าความกว้าง ความสูง ขนาดตัวอักษร ฯลฯ โดยสัมพันธ์กับพารามิเตอร์พื้นฐานอื่นๆ

หน่วยสัมพัทธ์ขึ้นอยู่กับแบบอักษร

หน่วยสัมพัทธ์ที่ขึ้นกับแบบอักษรมีการอ้างอิงล่วงหน้า ขนาดที่กำหนดค่าคุณสมบัติแบบอักษรหรือตระกูลแบบอักษร:

• เช่น (ความสูงของตัวอักษร x);
• ช( ความกว้างอักขระเป็นศูนย์ (0));
• หน่วย em ใน CSS (ความสูงของแบบอักษรองค์ประกอบปัจจุบัน);
• อีกครั้ง ( ขนาดตัวอักษรขององค์ประกอบราก).

อดีต

กำหนดให้เป็น “ ความสูงของอักขระ x ของแบบอักษรปัจจุบันหรือครึ่งหนึ่ง 1 em- นั่นก็คือความสูง ตัวอักษรตัวพิมพ์เล็ก x แบบอักษรที่ติดตั้ง- เมื่อคุณเปลี่ยนค่าของคุณสมบัติตระกูลฟอนต์ หน่วยอดีตจะเปลี่ยนไป

ช

เท่ากับความกว้างของอักขระ 0 หน่วยวัดนี้ยังเปลี่ยนแปลงเมื่อค่าของคุณสมบัติตระกูลฟอนต์เปลี่ยนแปลง

em

หน่วย CSS em มีค่าเท่ากับขนาดตัวอักษรของเนื้อหาหรือองค์ประกอบหลัก ตัวอย่างเช่น หากขนาดแบบอักษรขององค์ประกอบหลักคือ 30px ค่า 1em จะถูกคำนวณเป็น 30px (30 x 1) สำหรับองค์ประกอบย่อยทั้งหมด ตัวเลขไม่จำเป็นต้องเป็นจำนวนเต็ม หากในตัวอย่างเราแทนที่ 1em ด้วย 0.5 ค่าจะเป็น 15px (30 x 0.5)

หน่วย em รับค่าของแท็กพาเรนต์ ซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่พึงประสงค์เมื่อใช้องค์ประกอบที่ซ้อนกัน

สมมติว่าเรามีสามองค์ประกอบที่ซ้อนกัน องค์ประกอบแรก (รูท) มีขนาดตัวอักษร 30px และองค์ประกอบที่ซ้อนกันทั้งสองมีขนาดตัวอักษร 2em องค์ประกอบที่ซ้อนอยู่ใต้รูทจะมีขนาดตัวอักษรที่คำนวณเป็น 60px (30 x 2) และองค์ประกอบที่ซ้อนอยู่ภายในจะมีขนาดตัวอักษรคำนวณเป็น 120px (60 x 2)

อีกครั้ง

rem คล้ายกับ CSS em แต่ค่าของมันจะยังคงเท่ากับขนาดตัวอักษรขององค์ประกอบรูทเสมอ หน่วย rem มีประโยชน์ในการพัฒนาเว็บไซต์แบบตอบสนองเนื่องจากช่วยให้คุณสามารถปรับขนาดทั้งหน้าโดยการเปลี่ยนขนาดแบบอักษรในองค์ประกอบ HTML

หน่วยความยาวเปอร์เซ็นต์ตามขนาดวิวพอร์ต

พื้นที่การดูจะขึ้นอยู่กับความกว้างและความสูงของวิวพอร์ต และประกอบด้วย:

• วีเอช( ความสูงของวิวพอร์ต);
• โฟล์คสวาเก้น( ความกว้างวิวพอร์ต);
• วีมิน( เล็กที่สุดของ (vw, vh));
• วีแม็กซ์ ( ยิ่งใหญ่ที่สุดของ (vw, vh)).

โฟล์คสวาเก้น

นี่คือความกว้างของวิวพอร์ต 1vw เท่ากับ 1/100 ของความกว้างวิวพอร์ต คล้ายกับเปอร์เซ็นต์เล็กน้อย ยกเว้นว่าค่าจะยังคงเหมือนเดิมสำหรับองค์ประกอบทั้งหมด โดยไม่คำนึงถึงความกว้างขององค์ประกอบหลัก ตัวอย่างเช่น หากความกว้างของหน้าต่างคือ 1,000px ดังนั้น 1vw จะเท่ากับ 10px

vh

เช่นเดียวกับ vw ( ความกว้างวิวพอร์ต), เท่านั้น หน่วยนี้การวัดขึ้นอยู่กับความสูงของพื้นที่รับชม 1vh เท่ากับ 1/100 ของความสูงในการรับชม ตัวอย่างเช่น หากความสูงของหน้าต่างเบราว์เซอร์คือ 900px ดังนั้น 1vh จะเป็น 9px

วีมิน

Vmin เท่ากับ 1/100 ของ ค่าต่ำสุดระหว่างความสูงและความกว้างของวิวพอร์ต กล่าวอีกนัยหนึ่งคือ 1/100 ของด้านที่มีความยาวสั้นที่สุด เช่นถ้าขนาดหน้าต่าง 1200 x 800 พิกเซลจากนั้นค่า vmin จะเป็น 8px

วีแม็กซ์

vmax เท่ากับ 1/100 ของ ค่าสูงสุดระหว่างความสูงและความกว้างของวิวพอร์ต กล่าวอีกนัยหนึ่ง 1/100 ของด้าน ความยาวที่ยาวที่สุด- เช่น ถ้าขนาดเป็น 1200 x 800 พิกเซลจากนั้น vmax คือ 12px

ความสนใจ %

ระยะทางที่ระบุเป็นเปอร์เซ็นต์ขึ้นอยู่กับความยาวขององค์ประกอบหลัก ตัวอย่างเช่น หากองค์ประกอบหลักมีความกว้าง 1,000px และองค์ประกอบย่อยคือ 50% ของค่านั้น ความกว้าง องค์ประกอบลูกจะเป็น 500px .

การสนับสนุนเบราว์เซอร์

ไม่ว่าจะเป็น CSS, ex, px, cm, mm, in, pt และ pc

รองรับทุกเบราว์เซอร์ รวมถึง IE เวอร์ชันเก่าด้วย

CSS3 มีหน่วยการวัดใหม่ (ฉันคิดว่าฉันได้พูดคุยเกี่ยวกับเรื่องนี้แล้ว อังกฤษ) คุณเคยได้ยินเกี่ยวกับ px, pt, em และ rem ใหม่แล้ว มาดูอีกสองสามอย่าง: vw และ vh

มักจะมีองค์ประกอบในเค้าโครงที่รับประกันว่าจะพอดีกับวิวพอร์ตของเบราว์เซอร์ โดยทั่วไปแล้ว JavaScript ใช้สำหรับสิ่งนี้ มาตรวจสอบขนาดของวิวพอร์ตและปรับขนาดองค์ประกอบตามนั้น หากผู้ใช้ปรับขนาดหน้าต่างเบราว์เซอร์ กระบวนการนี้จะทำซ้ำ

การใช้ vw/vh ทำให้เราสามารถกำหนดขนาดขององค์ประกอบให้สัมพันธ์กับขนาดของวิวพอร์ตได้ หน่วย vw/vh มีความน่าสนใจเนื่องจาก 1vw เป็นหน่วยเท่ากับ 1/100 ของความกว้างวิวพอร์ต หากต้องการกำหนดความกว้างให้กับองค์ประกอบให้เท่ากับความกว้างของวิวพอร์ต ตัวอย่างเช่น คุณต้องตั้งค่า width:100vw

สามารถนำมาใช้ได้อย่างไร

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

คุณสามารถใช้หน่วยการวัดใหม่เพื่อกำหนดขนาดขององค์ประกอบที่อยู่ในการไหลปกติได้ เช่น ฉันสามารถโพสต์ภาพหน้าจอบนเพจได้ ความสูงของภาพหน้าจอเหล่านี้ไม่ควรเกินความสูงของวิวพอร์ต เมื่อต้องการทำเช่นนี้ ฉันสามารถตั้งค่าความสูงสูงสุดของรูปภาพได้:

Img ( ความสูงสูงสุด:95vh; )

ใน ในกรณีนี้ฉันตั้งค่าความสูงเป็น 95vh เพื่อให้มีพื้นที่ว่างเมื่อแสดงบนหน้าจอ

รองรับเบราว์เซอร์

หากเบราว์เซอร์หลักเกือบทั้งหมดรองรับ rem รวมถึง IE9 การใช้ vw และ vh ก็คุ้มค่าที่จะรอ บน ในขณะนี้รองรับพวกเขาเท่านั้น อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 9.

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

หน่วยสัมพัทธ์

หน่วยสัมพัทธ์มักใช้เพื่อทำงานกับข้อความ ในตาราง 1 แสดงรายการหน่วยสัมพันธ์หลัก

หน่วยเอ็มคือ ค่าที่เปลี่ยนแปลงได้ซึ่งขึ้นอยู่กับขนาดตัวอักษรขององค์ประกอบปัจจุบัน (ขนาดถูกกำหนดผ่านคุณสมบัติลักษณะขนาดตัวอักษร) แต่ละเบราว์เซอร์มีขนาดข้อความในตัวที่ใช้เมื่อไม่ได้ระบุขนาดนี้อย่างชัดเจน ดังนั้น ในตอนแรก 1em จะเท่ากับขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์หรือขนาดตัวอักษรขององค์ประกอบหลัก สัญกรณ์เปอร์เซ็นต์เหมือนกับ em โดยที่ค่า 1em และ 100% เท่ากัน

หน่วย ex ถูกกำหนดให้เป็นความสูงของอักขระ "x" ใน ตัวพิมพ์เล็ก- ex อยู่ภายใต้กฎเดียวกันกับ em กล่าวคือ ผูกไว้กับขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์หรือกับขนาดตัวอักษรขององค์ประกอบหลัก

หน่วย ch เท่ากับความกว้างของอักขระ "0" สำหรับองค์ประกอบปัจจุบัน และเช่นเดียวกับ em ขึ้นอยู่กับขนาดตัวอักษร

ความแตกต่างระหว่าง em และ rem มีดังนี้ em ขึ้นอยู่กับขนาดตัวอักษรขององค์ประกอบหลักและเปลี่ยนแปลงด้วย และ rem จะเชื่อมโยงกับองค์ประกอบรูท เช่น ขนาดตัวอักษรที่ระบุสำหรับองค์ประกอบ html

นอกจากนี้ยังมีกลุ่มของหน่วยสัมพันธ์ที่เชื่อมโยงกับขนาดของวิวพอร์ตของเบราว์เซอร์ ในตาราง 2 แสดงรายการพร้อมคำอธิบาย

หน่วยสัมบูรณ์

หน่วยสัมบูรณ์คือ มิติทางกายภาพ- นิ้ว เซนติเมตร มิลลิเมตร จุด พิกะ และพิกเซล สำหรับอุปกรณ์ที่มี dpi ต่ำ (จำนวนพิกเซลต่อนิ้วกำหนดความหนาแน่นของพิกเซล) การเชื่อมโยงจะต่อพิกเซล ในกรณีนี้ หนึ่งนิ้วเท่ากับ 96 พิกเซล แน่นอนว่านิ้วจริงจะไม่ตรงกับนิ้วบนอุปกรณ์ดังกล่าว บนอุปกรณ์ DPI สูง นิ้วจริงจะเท่ากับนิ้วบนหน้าจอ ดังนั้นขนาดพิกเซลจึงคำนวณเป็น 1/96 นิ้ว ในตาราง 3 แสดงรายการหน่วยสัมบูรณ์พื้นฐาน

ตัวอย่าง

ส่วนหัว 30px

ขนาดตัวอักษร 1.5 em

พาดหัว 24 จุด

เลื่อนข้อความไปทางขวา 30 มม

บันทึก

เมื่อตั้งค่าขนาด ต้องแน่ใจว่าได้ระบุหน่วยการวัด เช่น ความกว้าง: 30px มิฉะนั้นเบราว์เซอร์จะไม่สามารถแสดงผลที่ต้องการได้เนื่องจากไม่เข้าใจขนาดที่คุณต้องการ หน่วยจะไม่เพิ่มเมื่อเท่านั้น ค่าศูนย์(ระยะขอบ: 0)

Internet Explorer รองรับหน่วย vm แทน vmin

ข้อมูลจำเพาะ

ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน

• คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติจาก W3C และแนะนำให้ใช้เป็นมาตรฐาน
• คำแนะนำผู้สมัคร ( คำแนะนำที่เป็นไปได้ ) - กลุ่มที่รับผิดชอบมาตรฐานมีความพึงพอใจว่าบรรลุเป้าหมาย แต่ต้องการความช่วยเหลือจากชุมชนการพัฒนาเพื่อนำมาตรฐานไปใช้
• ข้อเสนอแนะที่เสนอ ข้อแนะนำ) - ในขั้นตอนนี้ เอกสารจะถูกส่งไปยังสภาที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
• Working Draft - ร่างฉบับสมบูรณ์ยิ่งขึ้นซึ่งได้รับการหารือและแก้ไขเพื่อการตรวจสอบของชุมชน
• ร่างบรรณาธิการ ( ร่างบรรณาธิการ) - เวอร์ชันร่างของมาตรฐานหลังจากมีการเปลี่ยนแปลงโดยบรรณาธิการโครงการ
• ร่าง ( ข้อกำหนดฉบับร่าง) - เวอร์ชันร่างแรกของมาตรฐาน

×