พอดแคสต์ CSS - 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 ไม่ได้ใช้สำหรับเนื้อหาดิจิทัลเท่านั้น แต่ยังใช้สำหรับจัดรูปแบบของเนื้อหาสิ่งพิมพ์ด้วย
ความยาวสัมบูรณ์จะมีประโยชน์มากเมื่อออกแบบสำหรับการพิมพ์
หน่วย | ชื่อ | เทียบเท่ากับ |
---|---|---|
ซม. [cm] | เซนติเมตร | 1 ซม. = 96 พิกเซล/2.54 |
มม. | มิลลิเมตร | 1 มม. = 1/10 ของ 1 ซม. |
คำถาม | 4 มิลลิเมตร | 1Q = 1/40 ของ 1 ซม. |
ใน | นิ้ว | 1 นิ้ว = 2.54 ซม. = 96 พิกเซล |
pc | ปิกาส | 1pc = 1/6 ของ 1 นิ้ว |
คะแนน | คะแนน | 1pt = 1/72 ของ 1 นิ้ว |
พิกเซล | พิกเซล | 1px = 1/96 ของ 1 นิ้ว |
ความยาวสัมพัทธ์
ความยาวสัมพัทธ์จะคำนวณเทียบกับค่าฐาน คล้ายๆ กับเปอร์เซ็นต์
ความแตกต่างระหว่างเปอร์เซ็นต์เหล่านี้กับเปอร์เซ็นต์คือคุณสามารถกำหนดขนาดองค์ประกอบตามบริบทได้
ซึ่งหมายความว่า CSS มีหน่วยอย่าง ch
ที่ใช้ขนาดข้อความเป็นพื้นฐาน และ vw
ซึ่งอิงตามความกว้างของวิวพอร์ต (หน้าต่างเบราว์เซอร์)
ความยาวสัมพัทธ์มีประโยชน์อย่างยิ่งบนเว็บเนื่องจากมีลักษณะที่ปรับเปลี่ยนตามอุปกรณ์
หน่วยที่สัมพันธ์กับขนาดแบบอักษร
CSS มอบหน่วยที่มีประโยชน์ซึ่งสัมพันธ์กับขนาดขององค์ประกอบของลักษณะแบบอักษรที่แสดงผล
เช่น ขนาดของตัวข้อความ (em
หน่วย) หรือความกว้างของอักขระแบบตัวพิมพ์ (ch
หน่วย)
หน่วย | ที่สัมพันธ์กับ: |
---|---|
em | เมื่อเทียบกับขนาดแบบอักษร เช่น 1.5em จะใหญ่กว่าขนาดแบบอักษรที่คํานวณพื้นฐาน 50% (ในอดีตคือความสูงของตัวอักษรพิมพ์ใหญ่ "M") |
เช่น | ฮิวริสติกเพื่อระบุว่าจะใช้ความสูง x, ตัวอักษร "x" หรือ ".5em" ในขนาดแบบอักษรที่คำนวณปัจจุบันขององค์ประกอบ |
cap | ความสูงของอักษรตัวพิมพ์ใหญ่ในขนาดแบบอักษรที่ประมวลผลปัจจุบันขององค์ประกอบ |
ch | ความก้าวหน้าของอักขระโดยเฉลี่ยของรูปอักขระแบบแคบในแบบอักษรขององค์ประกอบ (แสดงเป็นรูปอักขระ "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
นอกจากนี้ยังมีประโยชน์สำหรับการหมุนองค์ประกอบภายในฟังก์ชัน Transform ด้วย
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 ในการค้นหาสื่อและแสดงรูปภาพที่มีความละเอียดสูงขึ้น
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการปรับขนาด
ข้อใดต่อไปนี้เป็นขนาดที่ถูกต้อง
หน่วยสัมบูรณ์และหน่วยสัมพัทธ์แตกต่างกันอย่างไร
หน่วยวิวพอร์ตเป็นค่าสัมบูรณ์