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

พอดแคสต์ CSS - 008: หน่วยการกำหนดขนาด

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

สำหรับกรณีนี้ คุณสามารถใช้หน่วย 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

หมายเหตุ: ควรใช้ค่าที่ไม่มีหน่วยสำหรับ line-height แทนการระบุหน่วย ตามที่คุณได้เรียนรู้ในโมดูลการรับช่วง font-size สามารถรับค่าได้ การกำหนด line-height แบบไม่มีหน่วยจะคงความสูงของบรรทัดให้สัมพันธ์กับขนาดแบบอักษร ซึ่งจะให้ประสบการณ์การใช้งานที่ดีกว่า เช่น line-height: 15px ที่จะไม่เปลี่ยนแปลงและอาจดูแปลกๆ สำหรับแบบอักษรบางขนาด

ตัวเลขยังใช้ได้ในที่ต่อไปนี้

• เมื่อกำหนดค่าสำหรับตัวกรอง: 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

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

ขนาดและความยาว

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

ความยาวสัมบูรณ์

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

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

หากคุณพิมพ์หน้านี้ div จะพิมพ์เป็นสี่เหลี่ยมผืนผ้าสีดำขนาด 10x5 ซม. โปรดทราบว่าระบบไม่ได้ใช้ CSS สำหรับเนื้อหาดิจิทัลเท่านั้น แต่ยังใช้เพื่อจัดรูปแบบเนื้อหาสิ่งพิมพ์ด้วย ความยาวจริงอาจมีประโยชน์อย่างมากในการออกแบบสำหรับงานพิมพ์

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

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

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

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

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

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

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

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

หน่วย	สัมพันธ์กับ
VW	1% ของความกว้างของวิวพอร์ต ผู้คนใช้หน่วยโฆษณานี้เพื่อสอนวิธีแบบอักษรเจ๋งๆ เช่น การปรับขนาดแบบอักษรของส่วนหัวตามความกว้างของหน้าเว็บ เมื่อผู้ใช้ปรับขนาด จะมีการปรับขนาดตัวอักษรด้วย
VH	1% ของความสูงวิวพอร์ต ซึ่งคุณสามารถใช้เพื่อจัดเรียงรายการใน UI เช่น หากคุณมีแถบเครื่องมือส่วนท้าย
vi	1% ของขนาดวิวพอร์ตในแกนในบรรทัดขององค์ประกอบราก แกนหมายถึงโหมดการเขียน ในโหมดการเขียนแนวนอน เช่น ภาษาอังกฤษ แกนแทรกในบรรทัดอยู่ในแนวนอน ในโหมดการเขียนแนวตั้ง เช่น แบบตัวพิมพ์ภาษาญี่ปุ่นบางตัว แกนแทรกในบรรทัดจะยาวจากบนลงล่าง
vb	1% ของขนาดวิวพอร์ตในแกนบล็อกขององค์ประกอบราก สำหรับแกนบล็อก URL จะเป็นทิศทางของภาษา ภาษา LTR อย่างภาษาอังกฤษจะมีแกนบล็อกแนวตั้ง เนื่องจากผู้อ่านภาษาอังกฤษจะแยกวิเคราะห์หน้าเว็บจากบนลงล่าง โหมดการเขียนแนวตั้งจะมีแกนบล็อกแนวนอน
คำนวน	1% ของขนาดที่เล็กลงของวิวพอร์ต
vmax	1% ของขนาดที่ใหญ่กว่าของวิวพอร์ต

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

ในตัวอย่างนี้ div จะเท่ากับ 10% ของความกว้างของวิวพอร์ต เนื่องจาก 1vw เท่ากับ 1% ของความกว้างของวิวพอร์ต องค์ประกอบ p มี max-width ของ 60ch ซึ่งหมายความว่าต้องไม่เกิน 60 "0" ในแบบอักษรและขนาดที่คำนวณได้

วัตถุประสงค์: การปรับขนาดข้อความด้วยหน่วยสัมพัทธ์ เช่น em หรือ rem แทนที่จะใช้หน่วยสัมบูรณ์ เช่น px ขนาดของข้อความจะตอบสนองต่อความต้องการของผู้ใช้ได้ ซึ่งอาจรวมถึงขนาดแบบอักษรของระบบหรือขนาดแบบอักษรขององค์ประกอบระดับบน เช่น <body> ขนาดฐานของ em คือระดับบนสุดขององค์ประกอบและขนาดฐานของ rem คือขนาดแบบอักษรพื้นฐานของเอกสาร หากคุณไม่กำหนด font-size ในองค์ประกอบ html ระบบจะเลือกใช้ขนาดแบบอักษรของระบบที่ผู้ใช้ต้องการหากคุณใช้ความยาวสัมพัทธ์ เช่น em และ rem หากคุณใช้ px หน่วยสำหรับปรับขนาดข้อความ ระบบจะไม่สนใจค่ากำหนดนี้

หน่วยเบ็ดเตล็ด

มีหน่วยอื่นๆ ที่เลือกไว้ให้จัดการกับค่าบางประเภท

หน่วยของมุม

ในโมดูลสี เราดูที่หน่วยมุม ซึ่งมีประโยชน์ในการกำหนดมูลค่าวุฒิการศึกษา เช่น โทนสี 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');
  }
}

หมายเหตุ: หน่วยมุมอื่นๆ ได้แก่ rad (เรเดียน), grad (แกรเดียน) และ turn ซึ่งเป็นส่วนหนึ่งของมุม โดยที่ 1turn = 360deg และ 0.5turn = 180deg

หน่วยของความละเอียด

ในตัวอย่างก่อนหน้า ค่าของ min-resolution คือ 192dpi หน่วย dpi ย่อมาจากจุดต่อนิ้ว บริบทที่เป็นประโยชน์คือการตรวจจับหน้าจอความละเอียดสูง เช่น Retina แสดงผลในการค้นหาสื่อและแสดงรูปภาพที่มีความละเอียดสูงขึ้น

ตรวจสอบความเข้าใจ

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

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

ซม.

เซนติเมตร เป็นขนาดสัมบูรณ์ที่ถูกต้อง

UI

อินเทอร์เฟซผู้ใช้ไม่ใช่มิติข้อมูลใน CSS

สถานะ

นิ้ว ซึ่งเป็นขนาดสัมบูรณ์ที่ถูกต้อง

8

ไม่ใช่มิติข้อมูล CSS

พิกเซล

พิกเซล ซึ่งเป็นขนาดสัมบูรณ์ที่ถูกต้อง

ch

หน่วยอักขระ ซึ่งเป็นมิติข้อมูลสัมพัทธ์ที่ถูกต้อง

Ux

ประสบการณ์ของผู้ใช้ไม่ใช่มิติข้อมูลใน CSS

EM

ตัวอักษร "M" หน่วย มิติข้อมูลสัมพัทธ์ที่ถูกต้อง

ตัวอย่าง

ตัวอักษร "x" หน่วย มิติข้อมูลสัมพัทธ์ที่ถูกต้อง

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

ค่าสัมบูรณ์จะเปลี่ยนแปลงไม่ได้ แต่หน่วยสัมพัทธ์สามารถเปลี่ยนแปลงได้

ค่าสัมบูรณ์เปลี่ยนแปลงได้ แต่ฐานที่คํานวณไม่ได้

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

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

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

จริง

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

เท็จ

โดยจะสัมพันธ์กับหน้าต่างเอกสารที่สร้างขึ้น ซึ่งอาจจะเหมือนกันหรือไม่เหมือนกับหน้าจออุปกรณ์ก็ได้

แหล่งข้อมูล

• ค่าข้อมูลจำเพาะของ CSS และหน่วยระดับ 4
• ขนาดและหน่วยใน MDN
• ข้อมูลเกี่ยวกับ Ems
• คำอธิบายเกี่ยวกับเปอร์เซ็นต์