💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Thiết kế Responsive
📌
Kết luận
Dùng @media để tạo thiết kế Responsive (tương thích nhiều thiết bị)
📝 Mã thực tế tại đây
@media (min-width: 768px) {
.container { grid-template-columns: 1fr 1fr; }
}Mobile First (Ưu tiên di động)
Cách làm chuẩn hiện nay là thiết lập mặc định cho di động (1 cột), sau đó dùngmin-width để thêm các thiết kế cho màn hình lớn hơn.
| Điểm ngắt (Breakpoint) | Đối tượng |
|---|---|
| Mặc định | Điện thoại |
| Từ 768px trở lên | Máy tính bảng |
| Từ 1024px trở lên | Máy tính để bàn (PC) |
Tổng kết
- Dùng@media (min-width: ○px) để đổi phong cách theo chiều rộng màn hình
- Xu hướng chính là ưu tiên thiết kế cho di động trước (Mobile First)
Hãy thử trong phần bài tập
Hãy tạo một bố cục Responsive chuyển sang 2 cột khi màn hình từ 768px trở lên nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Thiết lập 2 cột khi màn hình rộng từ 768px trở lên, và 1 cột khi nhỏ hơn.
Gợi ý khi gặp khó khăn
Sử dụng @media (min-width: 768px).