หน่วยวัดขนาด

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 ไม่เพียงใช้กับเนื้อหาดิจิทัลเท่านั้น แต่ยังใช้เพื่อจัดรูปแบบเนื้อหาสิ่งพิมพ์ด้วย ความยาวแบบสัมบูรณ์มีประโยชน์อย่างยิ่งเมื่อออกแบบสำหรับสิ่งพิมพ์

หน่วย ชื่อ เทียบเท่า
cm เซนติเมตร 1 ซม. = 96 พิกเซล/2.54
มม. มิลลิเมตร 1 มม. = 1/10 ของ 1 ซม.
คําถาม เศษ 1 ใน 4 มิลลิเมตร 1Q = 1/40 ของ 1 ซม.
ใน นิ้ว 1 นิ้ว = 2.54 ซม. = 96 พิกเซล
pc ปิคาส 1pc = 1/6 ของ 1 นิ้ว
pt คะแนน 1pt = 1/72 ของ 1 นิ้ว
px พิกเซล 1px = 1/96 ของ 1 นิ้ว

ความยาวแบบสัมพัทธ์

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

หน่วยที่สัมพันธ์กับขนาดแบบอักษร

CSS มีหน่วยที่มีประโยชน์ซึ่งสัมพันธ์กับขนาดขององค์ประกอบของการจัดรูปแบบตัวอักษรที่แสดงผล เช่น ขนาดของข้อความ (หน่วย em) หรือความกว้างของอักขระแบบอักษร (หน่วย ch)

หน่วย สัมพันธ์กับ:
em สัมพันธ์กับขนาดแบบอักษร เช่น 1.5em จะใหญ่กว่าขนาดแบบอักษรฐานที่คำนวณแล้วขององค์ประกอบหลัก 50% (ก่อนหน้านี้ ความสูงของอักษรตัวพิมพ์ใหญ่ "M")
ตัวอย่าง วิธีการหาคำตอบโดยประมาณเพื่อพิจารณาว่าจะใช้ความสูงของ x, อักษร "x" หรือ ".5em" ในขนาดแบบอักษรที่คำนวณในปัจจุบันขององค์ประกอบหรือไม่
cap ความสูงของอักษรตัวพิมพ์ใหญ่ในขนาดแบบอักษรที่คำนวณในปัจจุบันขององค์ประกอบ
ช่อง ระยะห่างของอักขระโดยเฉลี่ยของสัญลักษณ์แคบในแบบอักษรขององค์ประกอบ (แสดงด้วยสัญลักษณ์ "0")
ic การเลื่อนอักขระโดยเฉลี่ยของสัญลักษณ์แบบเต็มความกว้างในแบบอักษรขององค์ประกอบ ตามที่แสดงโดยสัญลักษณ์ "水" (รูปอักษร CJK สำหรับน้ำ, U+6C34)
rem ขนาดแบบอักษรขององค์ประกอบรูท (ค่าเริ่มต้นคือ 16 พิกเซล)
lh ความสูงของบรรทัดขององค์ประกอบ
rlh ความสูงของบรรทัดขององค์ประกอบรูท
ข้อความ CSS ยอดเยี่ยมกว่า 10 เท่าด้วยป้ายกำกับสำหรับความสูงของส่วนยื่นขึ้น ความสูงของส่วนยื่นลง และความสูง x ความสูง x แสดงถึง 1ex และ 0 แสดงถึง 1ch

หน่วยที่สัมพันธ์กับวิวพอร์ต

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

หน่วย เมื่อเทียบกับ
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 ในคําค้นหาสื่อและแสดงรูปภาพที่มีความละเอียดสูงขึ้น

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการปรับขนาด

มิติข้อมูลใดต่อไปนี้ถูกต้อง

ซม.
เซนติเมตร ซึ่งเป็นมิติข้อมูลแบบสัมบูรณ์ที่ถูกต้อง
ui
อินเทอร์เฟซผู้ใช้ไม่ใช่มิติข้อมูลใน CSS
สถานะ
นิ้ว ซึ่งเป็นขนาดสัมบูรณ์ที่ถูกต้อง
8
ไม่ใช่มิติข้อมูล CSS
พิกเซล
พิกเซล ซึ่งเป็นมิติข้อมูลสัมบูรณ์ที่ถูกต้อง
ch
หน่วยอักขระ ซึ่งเป็นมิติข้อมูลสัมพัทธ์ที่ถูกต้อง
ux
ประสบการณ์ของผู้ใช้ไม่ใช่มิติข้อมูลใน CSS
em
หน่วยตัวอักษร "M" ซึ่งเป็นมิติข้อมูลที่เกี่ยวข้องที่ถูกต้อง
ex
หน่วยตัวอักษร "x" ซึ่งเป็นมิติข้อมูลสัมพัทธ์ที่ถูกต้อง

หน่วยสัมบูรณ์และหน่วยสัมพัทธ์แตกต่างกันอย่างไร

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

หน่วยวิวพอร์ตเป็นแบบสัมบูรณ์

จริง
จึงอาจให้ความรู้สึกแน่นอน แต่ก็สัมพันธ์กับวิวพอร์ต ซึ่งอาจเป็น iframe หรือ WebView และไม่ได้แสดงถึงขนาดหน้าจอของอุปกรณ์เสมอไป
เท็จ
ซึ่งจะสัมพันธ์กับหน้าต่างเอกสารที่สร้างเอกสารขึ้นมา ซึ่งอาจเหมือนกับหรือแตกต่างจากหน้าจอของอุปกรณ์

แหล่งข้อมูล