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

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล

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