หน่วย 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 บางรายการ อนุญาตให้ใช้ความยาวติดลบได้
หน่วยความยาวมีสองประเภท: สัมบูรณ์และสัมพัทธ์
ความยาวแน่นอน
หน่วยความยาวสัมบูรณ์ได้รับการแก้ไข และความยาวที่แสดงในสิ่งเหล่านี้จะปรากฏเป็นขนาดนั้นพอดี
ไม่แนะนำให้ใช้หน่วยความยาวสัมบูรณ์บนหน้าจอ เนื่องจากขนาดหน้าจอแตกต่างกันมาก อย่างไรก็ตาม สามารถใช้หากทราบสื่อพิมพ์ออก เช่น เค้าโครงการพิมพ์
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* พิกเซล (px) สัมพันธ์กับอุปกรณ์รับชม สำหรับอุปกรณ์ที่มี dpi ต่ำ 1px คือหนึ่งพิกเซลของอุปกรณ์ (จุด) ของจอแสดงผล สำหรับเครื่องพิมพ์และหน้าจอความละเอียดสูง 1px หมายถึงพิกเซลของอุปกรณ์หลายพิกเซล
ความยาวสัมพัทธ์
หน่วยความยาวสัมพัทธ์ระบุความยาวที่สัมพันธ์กับคุณสมบัติความยาวอื่น หน่วยความยาวสัมพัทธ์จะปรับขนาดได้ดีกว่าระหว่างสื่อการเรนเดอร์ที่ต่างกัน
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to the width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
เคล็ดลับ:หน่วย em และ rem นั้นใช้งานได้จริงในการสร้างเลย์เอาต์ที่ปรับขนาดได้อย่างสมบูรณ์แบบ!
* Viewport = ขนาดหน้าต่างเบราว์เซอร์ หากวิวพอร์ตกว้าง 50 ซม. 1vw = 0.5 ซม.
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับหน่วยความยาวอย่างเต็มที่
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |