Responsive Design

Responsive Design là kỹ thuật thiết kế website để tự động điều chỉnh và hiển thị tốt trên mọi kích thước màn hình, từ điện thoại đến máy tính bảng và desktop.

📱 Responsive Design là gì?

Responsive Design đảm bảo rằng website của bạn trông đẹp và hoạt động tốt trên:

Điện thoại di động (320px - 768px)
Máy tính bảng (768px - 1024px)
Desktop (1024px trở lên)

🎬 Video hướng dẫn

🖼️ Hình ảnh minh họa

📚 Nội dung cần học

Media Queries

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/* Mobile First Approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 1200px;
    }
}

Viewport Meta Tag

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Flexible Units

Percentage (%)
Viewport units (vw, vh)
rem và em
max-width và min-width

Flexible Images

1
2
3
4
img {
    max-width: 100%;
    height: auto;
}

Flexbox và Grid

Flexbox cho layout 1 chiều
CSS Grid cho layout 2 chiều
Responsive với flexbox và grid

✅ Best Practices

Mobile First: Thiết kế cho mobile trước
Breakpoints: Sử dụng breakpoints hợp lý
Touch-friendly: Buttons và links đủ lớn để click
Performance: Tối ưu ảnh và code
Testing: Test trên nhiều thiết bị