1. หน่วยความยาวใน CSS
ใน CSS ค่าหลายค่าใช้ความยาวเป็นค่า คุณลักษณะของโมเดลกล่องคือแอตทริบิวต์ค่าที่ชัดเจน ได้แก่ ความกว้าง ความสูง ระยะขอบ ช่องว่างภายใน และเส้นขอบ นอกจากนี้ ยังมีแอตทริบิวต์ CSS มากมายที่มีค่าเป็นค่าความยาว เช่น offset offset ขนาดกล่องเงาหรือขนาดตัวอักษร ระยะห่าง เป็นต้น เราจะพูดถึงหน่วยความยาวหลายหน่วยด้านล่าง เกี่ยวกับหน่วยความยาวและการใช้ประโยชน์
2. แนะนำสั้น ๆ (หน่วยความยาวมีอะไรบ้าง :)
หน่วยความยาวใน CSS มี 2 ประเภท ได้แก่ ความยาวสัมบูรณ์ และ ความยาวสัมพัทธ์
ความยาวสัมบูรณ์: px, in, cm, mm, pt, pc;
ความยาวสัมพัทธ์: em, rem, ex, vh, vw, vmin, vmax, %, fr
3. การแนะนำโดยละเอียด
1. หน่วยวัดความยาวสัมบูรณ์
หน่วยความยาวสัมบูรณ์แสดงถึงขนาดทางกายภาพจริง ขนาดของมันได้รับการแก้ไขและจะไม่เปลี่ยนแปลงเนื่องจากการเปลี่ยนแปลงขนาดขององค์ประกอบอื่น ๆ ตารางต่อไปนี้แสดงรายการหน่วยความยาวสัมบูรณ์ที่รองรับใน CSS
px: แสดงถึงพิกเซล พิกเซลจะสัมพันธ์กับความละเอียดของหน้าจอ หน้าเว็บจะแสดงเป็นพิกเซลที่แม่นยำและจะไม่เปลี่ยนแปลงเนื่องจากการเปลี่ยนแปลงขนาดขององค์ประกอบอื่นๆ พิกเซลยังคงเป็น หน่วยการวัดโดยทั่วไป เช่น สำหรับหน้าต่าง ความละเอียด ผู้ใช้ Mac ใช้คือ 96 พิกเซล/นิ้ว ในขณะที่ความละเอียดที่ใช้โดยผู้ใช้ Mac โดยทั่วไปคือ 72 พิกเซล/นิ้ว หน่วยในภาษา JavaScript ทั่วไปคือพิกเซลที่ใช้
div{ความกว้าง:200px;}in: inch เป็นไฟล์การวัดทางกายภาพ แต่ในฟิลด์ CSS นิ้วจะถูกแมปเป็นพิกเซลโดยตรง (1 นิ้ว == 2.54 ซม. == 96px)
div{ความกว้าง:2in;}c m: เซนติเมตรเป็นหน่วยวัดทางกายภาพที่คุ้นเคยและมีประโยชน์ มันถูกแมปเป็นพิกเซลด้วย (1 ซม. == 37.8 พิกเซล)
div{ความกว้าง:20ซม.;}mm: มิลลิเมตร เป็นหน่วยทางกายภาพในการวัดลำดับความสำคัญเล็กน้อย (1 มม. == 0.1 ซม. == 3.78px )
div{ความกว้าง:200มม.;}p t: คะแนนก็เป็นหน่วยความยาวทางกายภาพเช่นกัน (1pt == 1/72in == 96/72px)
div{ความกว้าง:20pt;}pc: Pica เหมือนกับแต้ม ยกเว้น (1pc == 12pt)
div{ความกว้าง:20pt;}ตัวอย่าง:
<!DOCTYPEhtml><html><head><title>หน่วยความยาวสัมบูรณ์</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font {font -size:2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>นี่คือฟอนต์ขนาด 16px<pclass=pt>นี่คือฟอนต์ขนาด 2pt< /p ><pclass=pc>นี่คือฟอนต์ของ 3pc</p></div></body></html>ผลลัพธ์ที่นำเสนอมีดังนี้:
2. หน่วยความยาวสัมพัทธ์
หน่วยความยาวสัมพัทธ์หมายความว่าหน่วยนี้ไม่มีค่าคงที่ ค่าของมันได้รับผลกระทบจากแอตทริบิวต์องค์ประกอบอื่นๆ (เช่น ขนาดของหน้าต่างเบราว์เซอร์และขนาดขององค์ประกอบหลัก) หน่วยความยาวสัมพัทธ์มีความเหมาะสมมากสำหรับการตอบสนอง รูปแบบต่อไปนี้ตารางแสดงรายการหน่วยความยาวสัมพันธ์ที่ได้รับการสนับสนุนใน CSS
em: em เป็นหน่วยสัมพัทธ์ซึ่งสัมพันธ์กับขนาดตัวอักษรของข้อความภายในวัตถุปัจจุบัน หากไม่ได้ตั้งค่าขนาดตัวอักษรในแถวปัจจุบัน มันจะสัมพันธ์กับขนาดตัวอักษรเริ่มต้นของเบราว์เซอร์ เริ่มแรก การวัดการเรียงพิมพ์จะขึ้นอยู่กับขนาดของอักษรตัวพิมพ์ใหญ่ M ของฟอนต์ปัจจุบัน เมื่อตระกูลฟอนต์มีการเปลี่ยนแปลง ขนาดของมันจะไม่เปลี่ยนแปลง แต่เมื่อขนาดฟอนต์เปลี่ยนไป ขนาดของฟอนต์ก็จะเปลี่ยนไป em จะสืบทอดขนาดตัวอักษรขององค์ประกอบหลัก (มีตัวอย่างของ em และ rem ด้านล่าง)
ไม่มีกฎ CSS ใด ๆ: (1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm)
div{ความกว้าง:40em;}re em: rem เป็นหน่วยสัมพัทธ์เหมือนกับ em แต่ต่างจาก em ตรงที่ rem จะสัมพันธ์กับองค์ประกอบรากเสมอ (เช่น: root{}) ต่างจาก em ซึ่งใช้วิธีการเรียงซ้อนในการ คำนวณขนาด หน่วยสัมพันธ์นี้ใช้งานง่ายกว่า
div {ความกว้าง:40rem;}ตัวอย่าง: หน่วยความยาวสัมพัทธ์ สัมพันธ์กับความสูงของอักขระ ขนาดตัวอักษรเริ่มต้น ต่างจาก em ตรงที่ em จะไม่เปลี่ยนแปลงเมื่อเปลี่ยนตระกูลฟอนต์ แต่หน่วย ex จะเปลี่ยนเนื่องจากค่าของหน่วยและฟอนต์นั้นมีความสัมพันธ์ข้อจำกัดพิเศษ
div{ความกว้าง:40ex;}ch: ความหมายแฝงของ ch คล้ายกับความสูงของ ex สัมพันธ์กับ x ยกเว้นว่า ch นั้นจะขึ้นอยู่กับความกว้างของอักขระ 0 แทนที่จะเป็นความสูงของอักขระ x 1ch คือความกว้างของตัวเลข 0 เมื่อฟอนต์แฟมิลี่เปลี่ยนแปลง ch ก็จะเปลี่ยนไปเช่นกัน
div{ความกว้าง:40ch;}vw: vw (ความกว้างของมุมมอง) คือหน่วยความกว้างของภาพ (ความกว้างของหน้าต่าง) 1vw เท่ากับหนึ่งเปอร์เซ็นต์ของความกว้างของพื้นที่ภาพ ของ vw ใช้กับองค์ประกอบทั้งหมด เช่นเดียวกับโดยไม่คำนึงถึงองค์ประกอบหลักหรือความกว้างขององค์ประกอบหลัก หน่วย rem นั้นจะสัมพันธ์กับองค์ประกอบรูทเสมอ (มีตัวอย่าง vh และ vw ด้านล่าง)
div{ความกว้าง:40vw;}vh: หน่วยของ vh (ความสูงของวิวพอร์ต) และ vw (ความกว้างของวิวพอร์ต) จะเท่ากัน ค่า vh ที่ต่างกันจะสัมพันธ์กับความสูงของพื้นที่ภาพ (ความสูงของหน้าต่าง)
div{ความกว้าง:40vh;}vmin: ค่าของ vmin เป็นค่าที่น้อยกว่าระหว่าง vw และ vh ปัจจุบัน ในตัวอย่างการใช้งานประเภทขนาดมาตรฐาน เมื่อเปรียบเทียบกับหน่วย vw และ vh ที่กำหนดขนาดหน้าจอด้วยตัวเอง vmin มีประโยชน์มากกว่า
div{ความกว้าง:40vmin;}vmax: ค่าของ vmax คือค่าที่มากกว่าระหว่าง vw และ vh
div{ความกว้าง:40vmax;}%: เปอร์เซ็นต์ ค่าความยาวเป็นเปอร์เซ็นต์จะขึ้นอยู่กับค่าความยาวขององค์ประกอบหลักที่มีแอตทริบิวต์เดียวกัน ตัวอย่างเช่น หากความกว้างขององค์ประกอบคือ 450px และความกว้างขององค์ประกอบย่อยถูกตั้งค่าเป็น 50% ดังนั้น องค์ประกอบลูกถูกแสดงผล ความกว้างคือ 225px (หากไม่มีการตั้งค่าเฉพาะสำหรับองค์ประกอบหลักทั้งหมด การตั้งค่าเปอร์เซ็นต์ความสูงจะทำให้ค่าขององค์ประกอบทั้งหมดเป็น 0)
div{ความกว้าง:40%;}fr: หน่วยความยาวที่ใช้ในโครงร่างกริด เรามักใช้ fr ในการคำนวณ
คำสั่งต่อไปนี้ประกาศตารางที่มีสามบรรทัด ความสูงของบรรทัดแรกคือ 30px ความสูงของบรรทัดที่สองคือ 30px และความสูงของบรรทัดที่สามคือ 60px
ตารางแม่แบบแถว:30px1fr2fr;
ตัวอย่าง:
<!DOCTYPEhtml><html><head><title>หน่วยความยาวสัมพัทธ์</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- size:2em;}.ex>span{font-size:3ex;}.ch>span{font-size:4ch;}</style></head><body><divclass=box>นี่คือแบบอักษร 16px <pclass=info>นี่คือแบบอักษรของ 2em</p><pclass=ex>x: <span>นี่คือแบบอักษรของ 3ex</span></p><pclass=ch>0: <span>นี่ เป็นฟอนต์ขนาด 4ch</span></p></div></body></html>แสดงด้านล่าง:
3. สรุปหน่วยความยาว:
(1) ก่อนอื่น เราต้องเข้าใจสิ่งหนึ่ง นั่นคือ ความละเอียดของหน้าจอคืออะไร เรารู้ว่าภายใต้ความละเอียดที่ต่างกัน ขนาดของพิกเซลจะแตกต่างกัน ดังนั้นหน้าเว็บเดียวกันจึงใช้ px เป็นหน่วยความยาว At ขณะเดียวกันขนาดการแสดงผลจะแตกต่างกันที่ความละเอียดต่างกัน พิกเซลจะมีขนาดใหญ่ขึ้นและรายละเอียดไม่ชัดเจนเพียงพอ แม้ว่าหน้าที่แสดงจะมีขนาดใหญ่เช่นกัน แต่ก็เบลอ
(2) ที่จริงแล้ว หน่วยทั้งหมดไม่ว่าจะเป็นหน่วยสัมพัทธ์หรือหน่วยสัมบูรณ์ (เมื่อแสดงบนหน้าจอ) จะถูกแปลงเป็นหน่วย px ในที่สุด ดังนั้นโดยทั่วไปเมื่อสร้างหน้าเว็บ หน่วยพื้นฐานเลือก px แทน pt เพราะ pt คือ แปลงเป็น px เพื่อแสดงผลผ่าน DPI ของเบราว์เซอร์ด้วย (เช่น DPI ของ FireFox คือ 96 จากนั้น 9pt = 12px) ไม่เพียงแต่ pt, cm, in, mm และหน่วยอื่นๆ เท่านั้นที่ถูกแปลงเป็น px ดังนั้นไม่ว่าจะเป็นค่าสัมบูรณ์หรือค่าสัมพัทธ์ ก็จะเปลี่ยนที่ความละเอียดต่างกัน อย่าคิดว่าหากตั้งค่าความยาวเป็น 3 ซม. ก็จะเปลี่ยนที่ ความละเอียดที่แตกต่างกัน ความละเอียดยังคงไม่เปลี่ยนแปลงที่ 3 ซม.
(3) ฉันคิดว่า pt ยังคงเป็นหน่วยที่มีประโยชน์มาก โดยเฉพาะอย่างยิ่งเมื่อพิมพ์ ขณะนี้หน้าเว็บบางหน้าถูกนำมาใช้เพื่อแสดงหน้าเดียวและพิมพ์ด้วยวิธีอื่น ลองใช้ pt ด้านบนกัน เพราะสำหรับความละเอียดที่แตกต่างกัน การพิมพ์ หน้ามีขนาดเท่ากัน นี่เป็นลักษณะแรกของหน่วยสัมบูรณ์ แต่คุณยังต้องจำไว้ว่าบนจอแสดงผล หน่วยนี้แสดงถึงไม่ใช่ความยาวจริง แต่ยังต้องปรับตามขนาดจริงของ พิกเซล (เกี่ยวข้องกับความละเอียด)
(4) ในความเป็นจริง เราสามารถเข้าใจได้ด้วยวิธีนี้ โดยถือว่า px เป็นหน่วยสัมบูรณ์ (หน่วยสัมบูรณ์บนจอแสดงผล) และหน่วยอื่นๆ จะขึ้นอยู่กับหน่วยนั้น เช่น em ซึ่งเป็นความสูงที่สัมพันธ์กับแบบอักษรข้อความปัจจุบัน ( สมมติว่าขนาดแบบอักษรของข้อความปัจจุบันคือ 12px และเราตั้งค่าแบบอักษรใหม่เป็น 1.5em จากนั้นขนาดแบบอักษรใหม่จะถูกแปลงเป็น 12 * 1.5 = 18px) สิ่งที่คุณต้องจำไว้คือ em คือความสูงที่สัมพันธ์กับองค์ประกอบหลัก . องศา สมมติว่าเราตั้งค่าแบบอักษรเป็น 12px ในระดับแรก 1.5em ในระดับที่สอง และ 1.5em ในระดับที่สาม และ 1.5em ในระดับที่สาม 18 * 1.5 = 27px