The CSS Podcast - 008: Sizing Units
เว็บเป็นสื่อที่ปรับเปลี่ยนตามพื้นที่โฆษณา แต่บางครั้งคุณอาจต้องควบคุมขนาดของเว็บเพื่อปรับปรุงคุณภาพโดยรวมของอินเทอร์เฟซ ตัวอย่างที่ดีของกรณีนี้คือ การจำกัดความยาวบรรทัดเพื่อปรับปรุงความง่ายในการอ่าน คุณจะดำเนินการดังกล่าวในสื่อที่ยืดหยุ่นอย่างเว็บได้อย่างไร
ในกรณีนี้ คุณสามารถใช้หน่วย ch
ซึ่งเท่ากับความกว้างของตัวอักษร "0" ในแบบอักษรที่แสดงผลตามขนาดที่คำนวณ
หน่วยนี้ช่วยให้คุณจำกัดความกว้างของข้อความด้วยหน่วยที่ออกแบบมาเพื่อปรับขนาดข้อความ ซึ่งจะช่วยให้ควบคุมได้อย่างคาดการณ์ได้ ไม่ว่าข้อความนั้นจะมีขนาดเท่าใดก็ตาม
หน่วย ch
เป็นหนึ่งในหน่วยไม่กี่หน่วยที่มีประโยชน์สําหรับบริบทที่เฉพาะเจาะจง เช่น ตัวอย่างนี้
Numbers
ระบบจะใช้ตัวเลขเพื่อกำหนด opacity
, line-height
และแม้แต่ค่าของช่องสีใน rgb
ตัวเลขคือจำนวนเต็มที่ไม่มีหน่วย (1, 2, 3, 100) และทศนิยม (.1, .2, .3)
ตัวเลขมีความหมายโดยขึ้นอยู่กับบริบท
ตัวอย่างเช่น เมื่อกําหนด line-height
ตัวเลขจะแสดงอัตราส่วนหากคุณกําหนดโดยไม่ระบุหน่วยที่รองรับ
p {
font-size: 24px;
line-height: 1.5;
}
ในตัวอย่างนี้ 1.5
เท่ากับ 150% ของขนาดแบบอักษรพิกเซลที่คํานวณขององค์ประกอบ p
ซึ่งหมายความว่าหาก p
มี font-size
เป็น 24px
ระบบจะคํานวณความสูงของบรรทัดเป็น 36px
นอกจากนี้ คุณยังใช้ตัวเลขในตำแหน่งต่อไปนี้ได้ด้วย
- เมื่อตั้งค่าตัวกรอง:
filter: sepia(0.5)
จะใช้ฟิลเตอร์สีซีเปีย50%
กับองค์ประกอบ - เมื่อตั้งค่าความทึบแสง:
opacity: 0.5
จะใช้ความทึบแสง50%
- ในช่องสี:
rgb(50, 50, 50)
โดยค่าที่ยอมรับได้คือ 0-255 ดูบทเรียนสี - วิธีเปลี่ยนรูปแบบองค์ประกอบ:
transform: scale(1.2)
ปรับขนาดองค์ประกอบเป็น 120% ของขนาดเริ่มต้น
เปอร์เซ็นต์
เมื่อใช้เปอร์เซ็นต์ใน CSS คุณจำเป็นต้องทราบวิธีคำนวณเปอร์เซ็นต์
เช่น width
จะคํานวณเป็นเปอร์เซ็นต์ของความกว้างที่ใช้ได้ขององค์ประกอบหลัก
div {
width: 300px;
height: 100px;
}
div p {
width: 50%;
}
ในตัวอย่างด้านบน ความกว้างของ div p
คือ 150px
โดยมีสมมติฐานว่าเลย์เอาต์ใช้ box-sizing: content-box
เริ่มต้น
หากคุณตั้งค่า margin
หรือ padding
เป็นเปอร์เซ็นต์ ความกว้างขององค์ประกอบหลักจะแบ่งออกเป็นส่วนๆ โดยไม่คำนึงถึงทิศทาง
div {
width: 300px;
height: 100px;
}
div p {
margin-top: 50%; /* calculated: 150px */
padding-left: 50%; /* calculated: 150px */
}
ในข้อมูลโค้ดด้านบน ทั้ง margin-top
และ padding-left
จะประมวลผลไปยัง 150px
div {
width: 300px;
height: 100px;
}
div p {
width: 50%; /* calculated: 150px */
transform: translateX(10%); /* calculated: 15px */
}
หากคุณตั้งค่า transform
เป็นเปอร์เซ็นต์ ระบบจะอิงตามองค์ประกอบที่มีชุดการเปลี่ยนรูปแบบ
ในตัวอย่างนี้ p
มีค่า translateX
เป็น 10%
และ width
เป็น 50%
ก่อนอื่น ให้คำนวณความกว้างที่จะได้ ซึ่งก็คือ 150px
เนื่องจากเป็น50% ของความกว้างขององค์ประกอบหลัก
จากนั้นใช้ 10%
จาก 150px
ซึ่งเท่ากับ 15px
ขนาดและความยาว
หากแนบหน่วยกับตัวเลข หน่วยนั้นจะกลายเป็นมิติข้อมูล
เช่น 1rem
คือมิติข้อมูล
ในบริบทนี้ หน่วยที่ติดอยู่กับตัวเลขจะถูกเรียกในข้อมูลจำเพาะว่าเป็นโทเค็นมิติข้อมูล
ความยาวคือมิติข้อมูลที่หมายถึงระยะทาง และอาจเป็นค่าสัมบูรณ์หรือสัมพัทธ์ก็ได้
ความยาวสัมบูรณ์
ความยาวแบบสัมบูรณ์ทั้งหมดจะแก้ไขตามฐานเดียวกัน ทำให้คาดการณ์ได้ไม่ว่าจะใช้ที่ใดใน CSS
ตัวอย่างเช่น หากคุณใช้ cm
เพื่อปรับขนาดองค์ประกอบแล้วพิมพ์ออกมา ผลลัพธ์ที่ได้ควรถูกต้องหากเปรียบเทียบกับไม้บรรทัด
div {
width: 10cm;
height: 5cm;
background: black;
}
หากคุณพิมพ์หน้านี้ div
จะพิมพ์เป็นสี่เหลี่ยมผืนผ้าสีดำขนาด 10x5 ซม.
โปรดทราบว่า CSS ไม่เพียงใช้กับเนื้อหาดิจิทัลเท่านั้น แต่ยังใช้เพื่อจัดรูปแบบเนื้อหาสิ่งพิมพ์ด้วย
ความยาวแบบสัมบูรณ์มีประโยชน์อย่างยิ่งเมื่อออกแบบสำหรับสิ่งพิมพ์
ความยาวแบบสัมพัทธ์
ระบบจะคํานวณความยาวแบบสัมพัทธ์เทียบกับค่าฐาน ซึ่งคล้ายกับเปอร์เซ็นต์
ความแตกต่างระหว่างค่าเหล่านี้กับเปอร์เซ็นต์คือคุณสามารถปรับขนาดองค์ประกอบตามบริบทได้
ซึ่งหมายความว่า CSS มีหน่วย เช่น ch
ที่ใช้ขนาดข้อความเป็นพื้นฐาน และ vw
ซึ่งอิงตามความกว้างของวิวพอร์ต (หน้าต่างเบราว์เซอร์)
ความยาวที่สัมพันธ์กันมีประโยชน์อย่างยิ่งบนเว็บ เนื่องจากมีลักษณะการตอบสนองอย่างรวดเร็ว
หน่วยที่สัมพันธ์กับขนาดแบบอักษร
CSS มีหน่วยที่มีประโยชน์ซึ่งสัมพันธ์กับขนาดขององค์ประกอบของการจัดรูปแบบตัวอักษรที่แสดงผล เช่น ขนาดของข้อความ (หน่วย em
) หรือความกว้างของอักขระแบบอักษร (หน่วย ch
)
หน่วย | สัมพันธ์กับ: |
---|---|
em | สัมพันธ์กับขนาดแบบอักษร เช่น 1.5em จะใหญ่กว่าขนาดแบบอักษรฐานที่คำนวณแล้วขององค์ประกอบหลัก 50% (ก่อนหน้านี้ ความสูงของอักษรตัวพิมพ์ใหญ่ "M") |
ตัวอย่าง | วิธีการหาคำตอบโดยประมาณเพื่อพิจารณาว่าจะใช้ความสูงของ x, อักษร "x" หรือ ".5em" ในขนาดแบบอักษรที่คำนวณในปัจจุบันขององค์ประกอบหรือไม่ |
cap | ความสูงของอักษรตัวพิมพ์ใหญ่ในขนาดแบบอักษรที่คำนวณในปัจจุบันขององค์ประกอบ |
ช่อง | ระยะห่างของอักขระโดยเฉลี่ยของสัญลักษณ์แคบในแบบอักษรขององค์ประกอบ (แสดงด้วยสัญลักษณ์ "0") |
ic | การเลื่อนอักขระโดยเฉลี่ยของสัญลักษณ์แบบเต็มความกว้างในแบบอักษรขององค์ประกอบ ตามที่แสดงโดยสัญลักษณ์ "水" (รูปอักษร CJK สำหรับน้ำ, U+6C34) |
rem | ขนาดแบบอักษรขององค์ประกอบรูท (ค่าเริ่มต้นคือ 16 พิกเซล) |
lh | ความสูงของบรรทัดขององค์ประกอบ |
rlh | ความสูงของบรรทัดขององค์ประกอบรูท |
หน่วยที่สัมพันธ์กับวิวพอร์ต
คุณสามารถใช้ขนาดของวิวพอร์ต (หน้าต่างเบราว์เซอร์) เป็นพื้นฐานแบบสัมพัทธ์ได้ หน่วยเหล่านี้จะแบ่งพื้นที่ในวิวพอร์ตที่มีอยู่
หน่วย | เมื่อเทียบกับ |
---|---|
vw | 1% ของความกว้างของวิวพอร์ต ผู้คนใช้หน่วยโฆษณานี้เพื่อแสดงเคล็ดลับเกี่ยวกับแบบอักษรเจ๋งๆ เช่น การปรับขนาดแบบอักษรของส่วนหัวตามความกว้างของหน้าเว็บ เมื่อผู้ใช้ปรับขนาด ขนาดแบบอักษรก็จะปรับขนาดด้วย |
vh | 1% ของความสูงของวิวพอร์ต คุณใช้ส่วนนี้เพื่อจัดเรียงรายการใน UI ได้ เช่น หากมีแถบเครื่องมือส่วนท้าย |
vi | 1% ของขนาดวิวพอร์ตในแกนแนวนอนขององค์ประกอบรูท แกนหมายถึงโหมดการเขียน ในโหมดการเขียนแนวนอน เช่น ภาษาอังกฤษ แกนในบรรทัดจะเป็นแนวนอน ในโหมดการเขียนแนวตั้ง เช่น ตัวพิมพ์ญี่ปุ่นบางแบบ แกนแนวนอนจะวิ่งจากบนลงล่าง |
vb | 1% ของขนาดวิวพอร์ตในแกนบล็อกขององค์ประกอบรูท สำหรับแกนบล็อก นี่เป็นทิศทางของภาษา ภาษาแบบ LTR เช่น ภาษาอังกฤษจะมีแกนบล็อกแนวตั้งเนื่องจากโปรแกรมอ่านภาษานี้จะแยกวิเคราะห์หน้าเว็บจากบนลงล่าง โหมดการเขียนแนวตั้งมีแกนบล็อกแนวนอน |
vmin | 1% ของขนาดที่เล็กลงของวิวพอร์ต |
vmax | 1% ของขนาดที่ใหญ่กว่าของวิวพอร์ต |
div {
width: 10vw;
}
p {
max-width: 60ch;
}
ในตัวอย่างนี้ div
จะเท่ากับ 10% ของความกว้างของวิวพอร์ต เนื่องจาก 1vw
เท่ากับ 1% ของความกว้างของวิวพอร์ต
องค์ประกอบ p
มี max-width
เป็น 60ch
ซึ่งหมายความว่าต้องมีความกว้างไม่เกิน 60 อักขระ "0" ในแบบอักษรและขนาดที่คำนวณ
หน่วยอื่นๆ
นอกจากนี้ยังมีหน่วยอื่นๆ อีกที่กำหนดไว้เพื่อจัดการกับค่าบางประเภท
หน่วยวัดมุม
ในโมดูลสี เราดูที่หน่วยมุม ซึ่งมีประโยชน์สำหรับการกำหนดค่าองศา เช่น เฉดสีใน hsl
นอกจากนี้ ยังมีประโยชน์สำหรับการหมุนองค์ประกอบภายในฟังก์ชันการเปลี่ยนรูปแบบด้วย
div {
width: 150px;
height: 150px;
transform: rotate(60deg);
}
เมื่อใช้หน่วยมุม deg
คุณจะหมุน div
90° บนแกนกลางได้
div {
background-image: url('a-low-resolution-image.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div {
background-image: url('a-high-resolution-image.jpg');
}
}
หน่วยของความละเอียด
ในตัวอย่างก่อนหน้านี้ ค่าของ min-resolution
คือ 192dpi
หน่วย dpi
หมายถึงจุดต่อนิ้ว
บริบทที่มีประโยชน์สําหรับกรณีนี้คือการตรวจหาหน้าจอที่มีความละเอียดสูงมาก เช่น จอแสดงผล Retina ในคําค้นหาสื่อและแสดงรูปภาพที่มีความละเอียดสูงขึ้น
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการปรับขนาด
มิติข้อมูลใดต่อไปนี้ถูกต้อง
หน่วยสัมบูรณ์และหน่วยสัมพัทธ์แตกต่างกันอย่างไร
หน่วยวิวพอร์ตเป็นแบบสัมบูรณ์