อ้างอิงหน่วย CSS
คู่มืออ้างอิงหน่วย CSS px, em, rem, %, vw, vh, vmin, vmax และ ch จัดตามหมวด พร้อมอธิบายว่าควรใช้หน่วยสัมบูรณ์และสัมพัทธ์เมื่อใด ใช้ฟรี
| หน่วย | ชื่อ | ประเภท | คำอธิบาย | ตัวอย่าง |
|---|---|---|---|---|
| px | Pixels | absolute | หนึ่งพิกเซลบนหน้าจอ หน่วยพื้นฐานที่สุด | font-size: 16px; |
| em | Em | relative | ทวีคูณของ font-size ขององค์ประกอบแม่ | padding: 1.5em; |
| rem | Root Em | relative | ทวีคูณของ font-size ขององค์ประกอบราก (html) | margin: 2rem; |
| % | Percent | relative | เปอร์เซ็นต์เทียบกับพร็อพเพอร์ตี้ที่สอดคล้องกันขององค์ประกอบแม่ | width: 50%; |
| vw | Viewport Width | viewport | 1% ของความกว้างวิวพอร์ต | width: 100vw; |
| vh | Viewport Height | viewport | 1% ของความสูงวิวพอร์ต | height: 100vh; |
| vmin | Viewport Min | viewport | 1% ของค่าที่น้อยกว่าระหว่าง vw และ vh | font-size: 5vmin; |
| vmax | Viewport Max | viewport | 1% ของค่าที่มากกว่าระหว่าง vw และ vh | width: 50vmax; |
| dvh | Dynamic VH | viewport | ความสูงวิวพอร์ตแบบไดนามิก (รวมแถบที่อยู่บนมือถือ) | height: 100dvh; |
| svh | Small VH | viewport | ความสูงวิวพอร์ตที่เล็กที่สุด | min-height: 100svh; |
| lvh | Large VH | viewport | ความสูงวิวพอร์ตที่ใหญ่ที่สุด | max-height: 100lvh; |
| ch | Character | relative | อิงความกว้างของอักขระ "0" | max-width: 60ch; |
| ex | X-Height | relative | อิงความสูงของอักขระ "x" | line-height: 2ex; |
| cm | Centimeters | absolute | เซนติเมตร สำหรับงานพิมพ์ | width: 10cm; |
| mm | Millimeters | absolute | มิลลิเมตร สำหรับงานพิมพ์ | margin: 5mm; |
| in | Inches | absolute | นิ้ว (1in = 96px) | width: 2in; |
| pt | Points | absolute | พอยต์ (1pt = 1/72in) | font-size: 12pt; |
| cqi | Container Inline | container | 1% ของขนาดอินไลน์ในคอนเทนเนอร์ | font-size: 5cqi; |
| cqb | Container Block | container | 1% ของขนาดบล็อกในคอนเทนเนอร์ | padding: 2cqb; |
19개 표시 중
ฝัง
อัปเดตล่าสุด: 2026 · เครื่องมือออนไลน์ฟรี
อ้างอิงหน่วย CSS คืออะไร?
คู่มืออ้างอิงหน่วย CSS px, em, rem, %, vw, vh, vmin, vmax และ ch จัดตามหมวด พร้อมอธิบายว่าควรใช้หน่วยสัมบูรณ์และสัมพัทธ์เมื่อใด ใช้ฟรี
วิธีใช้งาน
- 1ป้อนข้อมูล— ป้อนข้อมูลที่ต้องการ
- 2ผลลัพธ์— ตรวจสอบผลลัพธ์ที่ประมวลผล
- 3คัดลอก— คัดลอกผลลัพธ์ไปใช้งาน
เครื่องมือที่เกี่ยวข้อง
ตัวแปลง PX-REMแปลงหน่วย px กับ rem ของ CSS ได้สองทางตามขนาดฟอนต์รากที่กำหนดเอง รองรับทศนิยม พร้อมตารางอ้างอิงและสไนปเพ็ต CSS ให้คัดลอก ใช้ฟรี
ตรวจสอบความเข้ากันได้ของเบราว์เซอร์เครื่องมือตรวจสอบความเข้ากันได้ของเบราว์เซอร์ออนไลน์ฟรี ดูว่า Chrome, Firefox, Safari และ Edge เวอร์ชันใดรองรับฟีเจอร์ CSS, JavaScript, HTML หรือ Web API
ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบภาพ ทั้ง linear, radial และ conic เพิ่มจุดสี ปรับมุม แล้วคัดลอก CSS ไปใช้กับพื้นหลังและปุ่มได้ทันที ใช้ฟรีในเบราว์เซอร์
ตัวสร้าง CSS Box Shadowเครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับ offset, blur, spread, สี และ inset พร้อมพรีวิวเงาเรียลไทม์และคัดลอกโค้ด CSS ได้ทันที
คำถามที่พบบ่อย
อ้างอิงหน่วย CSS ฟรี ครอบคลุมหน่วยความยาว มุม เวลาทั้งหมด
ไม่ การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ
ใช่ การออกแบบ responsive ทำงานบนอุปกรณ์มือถือ