หน่วย CSS
CSS มีหน่วยที่แตกต่างกันสำหรับการแสดงความยาว
คุณสมบัติ CSS หลายคนใช้ "length" ค่าเช่นความกว้างขอบ padding, font-size ชายแดนกว้าง ฯลฯ
ความยาวเป็นจำนวนตามด้วยหน่วยความยาวเช่น 10px คือ 2em ฯลฯ
ช่องว่างไม่สามารถปรากฏระหว่างจำนวนและหน่วย แต่ถ้ามีค่าเป็น 0, หน่วยสามารถละเว้น
สำหรับคุณสมบัติของ CSS บางยาวเชิงลบจะได้รับอนุญาต
มีสองประเภทของหน่วยความยาว: ญาติและ Absolute
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่รองรับหน่วยความยาว
| หน่วยความยาว | |||||
|---|---|---|---|---|---|
| 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 | 9.0 * | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | ได้รับการสนับสนุน | 19.0 | ได้รับการสนับสนุน | 20.0 |
Note: Internet Explorer 9 สนับสนุน vmin ที่มีชื่อที่ไม่ได้มาตรฐาน: VM
ความยาว
หน่วยความยาวญาติระบุความยาวเมื่อเทียบกับคุณสมบัติความยาวอีก หน่วยความยาวญาติที่สมดุลที่ดีระหว่างสื่อการแสดงผลที่แตกต่างกัน
| หน่วย | ลักษณะ |
|---|---|
| em | เมื่อเทียบกับขนาดตัวอักษรขององค์ประกอบ (2em means 2 times the size of the current font) ลอง |
| ex | เทียบกับ X-ความสูงของตัวอักษรในปัจจุบัน (rarely used) ลอง |
| ch | เมื่อเทียบกับความกว้างของ "0" (zero) |
| rem | เมื่อเทียบกับขนาดตัวอักษรขององค์ประกอบราก |
| vw | เมื่อเทียบกับ 1% ของความกว้างของวิวพอร์ต * ลอง |
| vh | เมื่อเทียบกับ 1% ของความสูงของวิวพอร์ต * ลอง |
| vmin | เมื่อเทียบกับ 1% ของของ viewport * มิติขนาดเล็ก ลอง |
| vmax | เมื่อเทียบกับ 1% ของของ viewport * มิติขนาดใหญ่ ลอง |
| % |
Tip: EM และ REM หน่วยมีการปฏิบัติในการสร้างรูปแบบที่ปรับขนาดได้อย่างสมบูรณ์แบบ!
* Viewport = ขนาดของหน้าต่างเบราว์เซอร์ ถ้าวิวพอร์ตกว้าง 50 ซม, 1vw = 0.5cm
แอบโซลูทยาว
หน่วยความยาวที่แน่นอนได้รับการแก้ไขและระยะเวลาในการแสดงออกในใด ๆ เหล่านี้จะปรากฏเป็นว่าขนาดที่
หน่วยความยาวแอบโซลูทไม่แนะนำสำหรับการใช้งานบนหน้าจอเพราะขนาดหน้าจอที่แตกต่างกันมาก แต่พวกเขาสามารถนำมาใช้ถ้าสื่อเอาท์พุทเป็นที่รู้จักกันเช่นสำหรับรูปแบบการพิมพ์
| หน่วย | ลักษณะ |
|---|---|
| cm | เซนติเมตร ลอง |
| mm | มิลลิเมตร ลอง |
| in | นิ้ว (1in = 96px = 2.54cm) ลอง |
| px * | พิกเซล (1px = 1/96th of 1in) ลอง |
| pt | จุด (1pt = 1/72 of 1in) ลอง |
| pc | picas (1pc = 12 pt) ลอง |
* พิกเซล (px) เป็นญาติกับอุปกรณ์รับชม สำหรับอุปกรณ์ต่ำ dpi, 1px เป็นอุปกรณ์หนึ่งพิกเซล (dot) ของจอแสดงผล สำหรับเครื่องพิมพ์และหน้าจอความละเอียดสูง 1px นัยพิกเซลอุปกรณ์หลาย