Khi bạn truy cập một trang web bằng điện thoại, máy tính bảng hoặc màn hình lớn, giao diện thường sẽ co giãn hoặc thay đổi để phù hợp. Đó là nhờ vào Media Queries – một tính năng cực kỳ quan trọng trong CSS giúp trang web trở nên responsive (phản hồi tốt trên mọi thiết bị).
Trong bài này, bạn sẽ học:
- Cú pháp và cách viết media query
- Thay đổi bố cục hoặc kích thước theo màn hình
- Các điểm ngắt (breakpoints) phổ biến
- Cách tổ chức mã CSS cho responsive tốt
1. Media query là gì?
Media query giúp bạn áp dụng CSS riêng biệt cho từng loại thiết bị hoặc kích thước màn hình.
Cú pháp cơ bản:
@media (max-width: 768px) {
/* CSS áp dụng khi màn hình nhỏ hơn hoặc bằng 768px */
}
2. Ví dụ đơn giản
body {
background-color: white;
}
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
→ Trên điện thoại, nền chuyển thành màu xám.
3. Phân biệt max-width và min-width
| Loại | Ý nghĩa |
|---|---|
max-width | CSS chạy khi màn hình nhỏ hơn hoặc bằng kích thước |
min-width | CSS chạy khi màn hình lớn hơn hoặc bằng kích thước |
Ví dụ:
/* Cho điện thoại */
@media (max-width: 480px) { ... }
/* Cho tablet trở lên */
@media (min-width: 768px) { ... }
4. Các breakpoint phổ biến
| Thiết bị | Kích thước (px) |
|---|---|
| Điện thoại nhỏ | ≤ 480px |
| Điện thoại lớn | 481px – 767px |
| Tablet | 768px – 1024px |
| Laptop/PC | ≥ 1025px |
5. Thực hành: làm layout co giãn
style.css
.container {
width: 80%;
margin: auto;
background: #e0f7fa;
padding: 20px;
}
.title {
font-size: 36px;
}
/* Mobile: font nhỏ lại */
@media (max-width: 600px) {
.title {
font-size: 24px;
}
.container {
width: 95%;
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 22 – Media Queries</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">Trang web của tôi</h1>
<p>Giao diện thay đổi khi thu nhỏ màn hình.</p>
</div>
</body>
</html>
6. Tổ chức file CSS cho responsive
Bạn có thể:
- Viết media query ngay bên dưới phần tử (dễ hiểu cho file nhỏ)
- Hoặc tách thành phần cuối CSS, chia theo
/* Điện thoại */,/* Tablet */…
Ví dụ:
/* Mặc định: desktop */
.navbar { ... }
/* Tablet */
@media (max-width: 1024px) { .navbar { ... } }
/* Mobile */
@media (max-width: 768px) { .navbar { ... } }
7. Ghi nhớ
| Câu hỏi | Câu trả lời |
|---|---|
| Muốn viết CSS riêng cho điện thoại? | Dùng @media (max-width: 768px) |
| Viết cho màn hình lớn? | Dùng min-width |
| Breakpoint phổ biến? | 480px, 768px, 1024px |
| Có thể dùng nhiều điều kiện? | Có – dùng and, or, not, v.v. |
Thảo luận