ทำให้เข้ากันได้กับทุกขนาดหน้าจอ
เมื่อทดสอบ Responsive แนะนำให้ติดตั้ง Responsive Viewer
Responsive Layout
| Property | Description | Example |
|---|---|---|
width: 100% | ใช้เพื่อให้ความกว้างยืดเต็มพื้นที่ | width: 100%; |
max-width | ใช้เพื่อไม่ให้ยืดเกินไปเวลา zoom out | max-width: 1200px; |
min-width | ใช้เพื่อไม่ให้หดจนเพี้ยนเวลา zoom in | min-width: 300px; |
Responsive Image, Video
| Property | Description | Example |
|---|---|---|
aspect-ratio | ใช้เพื่อให้ขนาดรูปภาพยังคงเท่าเดิม | aspect-ratio: 16/9; |
object-fit | ใช้เพื่อให้รูปภาพหรือวิดีโอครอบคลุมพื้นที่ | object-fit: cover; |
object-position | ใช้เพื่อกำหนดตำแหน่งของรูปภาพหรือวิดีโอ | object-position: center; |
Responsive Font
| Property | Description |
|---|---|
rem | ใช้เพื่อให้ขนาดยืดตามอุปกรณ์ |