CSS หน่วย

CSS หน่วย

CSS มีหลายหน่วยยาวที่แสดงความยาว

หลายคุณสมบัติ CSS รับค่ายาว width、margin、padding、font-size และอื่น ๆ。

ความยาวคือตัวเลขที่ตามด้วยหน่วยยาว อย่างเช่น 10px、2em และอื่น ๆ。

ตัวอย่าง

ตั้งค่าค่ายาวต่าง ๆ ด้วย px (พิกเซล):

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

ทดลองด้วยตัวเอง

ไม่ควรมีช่องว่างระหว่างตัวเลขและหน่วยนิยาม แต่ถ้าค่าเท่ากับ 0 ก็สามารถละเลยหน่วยนิยามได้

สำหรับบางคุณสมบัติ CSS อนุญาตให้ใช้ค่ายาวที่เป็นลบ

หน่วยยาวมีสองประเภทหน่วยแบบเฉพาะกิจและหน่วยนิยาม。

หน่วยยาวแบบเฉพาะกิจ

หน่วยยาวแบบเฉพาะกิจเป็นค่าคงที่ ความยาวที่นิยามด้วยหน่วยยาวแบบเฉพาะกิจจะแสดงที่แท้จริงเท่านั้น

ไม่ควรใช้หน่วยยาวแบบเฉพาะกิจบนหน้าจอเพราะขนาดหน้าจอเปลี่ยนแปลงมาก แต่ถ้ารู้ว่ามีสื่อที่ออกมา ก็สามารถใช้มันได้ เช่น สำหรับแผนผังที่พิมพ์ (print layout)

หน่วยนิยาม คำอธิบาย TIY
cm เซนติเมตร ลองทำแบบนี้
mm มิลลิเมตร ลองทำแบบนี้
in นิ้ว (1in = 96px = 2.54cm) ลองทำแบบนี้
px * พิกเซล (1px = 1/96 ของ 1in) ลองทำแบบนี้
pt ตัวอักษร (1pt = 1/72 ของ 1in) ลองทำแบบนี้
pc ปิคกา (1pc = 12 pt) ลองทำแบบนี้

* พิกเซล (px) คืออัตราส่วนของอุปกรณ์ที่ดูแล้ว。สำหรับอุปกรณ์ที่มี dpi ต่ำ 1px คือตัวอักษรอุปกรณ์หนึ่งของจอแสดงผล (จุด)。สำหรับเครื่องพิมพ์และจอแสดงผลที่มีการแสดงสูง 1px แสดงถึงอุปกรณ์หลายตัว

หน่วยยาวที่เป็นอัตราส่วน

หน่วยยาวที่เป็นอัตราส่วนนิยามว่าความยาวเป็นอัตราส่วนของความยาวของคุณสมบัติยาวอื่น ๆ หน่วยยาวที่เป็นอัตราส่วนนิยมแสดงระดับของการย่อยยืดเพื่อแสดงที่ดีขึ้นระหว่างสื่อที่มีการแสดงต่างกัน

หน่วยนิยาม คำอธิบาย TIY
em ขนาดของตัวอักษรที่ใช้กับตัวอักษร (font-size) (2em หมายถึงความใหญ่ 2 เท่าของขนาดตัวอักษรปัจจุบัน) ลองทำแบบนี้
ex ความสูงของตัวอักษร x-height (นิยมใช้น้อย) ลองทำแบบนี้
ch ความกว้างของ "0" (ศูนย์) ลองทำแบบนี้
rem ขนาดของตัวอักษรที่ใช้กับต้นตัวอักษรขององค์ประกอบต้นตัวอักษรของตัวอักษรที่มีขนาด font-size ลองทำแบบนี้
vw 1% ของความกว้าง viewport* ลองทำแบบนี้
vh 1% ของความสูง viewport* ลองทำแบบนี้
vmin เพียง 1% ของขนาดที่เล็กกว่า viewport* ลองทำแบบนี้
vmax เมื่อเปรียบเทียบกับขนาดใหญ่ของViewport* 1% ลองทำแบบนี้
% เมื่อเปรียบเทียบกับองค์ประกอบพ่อ ลองทำแบบนี้

คำเตือน：em และ rem หน่วยสามารถใช้เพื่อสร้างเครืองที่สามารถขยายได้เอง!

* Viewport = ขนาดของหน้าต่างบราวเซอร์ หากViewportมีขนาด 50 เซนติเมตรกว้าง แล้ว 1vw = 0.5 เซนติเมตร

การสนับสนุนโบรว์เซอร์

ตัวเลขในตารางนี้ระบุว่าบราวเซอร์แรกที่สนับสนุนหน่วยความยาวนี้

หน่วยความยาว
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0