Responsive Design là gì?
Website đẹp trên máy tính nhưng vỡ layout trên điện thoại? Responsive Design là giải pháp – giúp website tự động thích nghi với mọi kích thước màn hình.
Responsive Design là gì?
Responsive Design (Thiết kế web đáp ứng) là kỹ thuật xây dựng website tự động điều chỉnh bố cục theo kích thước màn hình của thiết bị.
Tại sao quan trọng?
- Hơn 75% người dùng internet Việt Nam truy cập bằng điện thoại (2024)
- Google áp dụng Mobile-first indexing từ 2019
- Website không responsive → thứ hạng SEO giảm
Muốn trở thành Frontend Developer? Xem: Frontend Developer là gì?
Kỹ thuật cơ bản
1. Viewport Meta Tag – Bắt buộc
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Media Query
/* Mobile mặc định */
.container { width: 100%; padding: 16px; }
/* Tablet 768px+ */
@media (min-width: 768px) {
.container { max-width: 750px; margin: 0 auto; }
}
/* Desktop 1024px+ */
@media (min-width: 1024px) {
.container { max-width: 1200px; }
}
3. Flexible Images
img { max-width: 100%; height: auto; }
Mobile-first vs Desktop-first
Nên dùng Mobile-first (viết CSS mobile trước, dùng min-width): phù hợp với 75%+ người dùng VN mobile, tốt cho SEO của Google.
Breakpoints phổ biến
| Tên | Kích thước | Thiết bị |
|---|---|---|
| sm | 576px | Điện thoại lớn |
| md | 768px | Tablet |
| lg | 1024px | Laptop |
| xl | 1280px | Desktop |
Ví dụ: Layout 2 cột responsive
.layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
.layout { flex-direction: row; }
.sidebar { width: 280px; flex-shrink: 0; }
.content { flex: 1; }
}
Xem thêm: CSS là gì?, Flexbox CSS, CSS Grid
Câu hỏi thường gặp
Responsive và Adaptive khác nhau không? Có. Responsive co giãn liên tục; Adaptive thay đổi tại breakpoint cố định. Responsive phổ biến hơn.
