CSS Media Queries được dùng để áp dụng các kiểu CSS theo kích thước màn hình.
- Media queries phát hiện các tính năng thiết bị như chiều rộng, chiều cao và độ phân giải.
- Breakpoints xác định kích thước màn hình nơi thiết kế cần thay đổi.
- Chúng đảm bảo trải nghiệm mượt mà, thân thiện với người dùng trên mọi thiết bị.
Syntax:
@media mediatype and (condition) {
/* CSS styles */
}
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.gfg {
color: black;
}
@media screen and (max-width: 500px) {
.gfg {
color: green;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="gfg">Sample Example of Media Query</div>
</body>
</html>
<!--Driver Code Ends-->
- Media queries áp dụng các quy tắc CSS dựa trên đặc điểm thiết bị như chiều rộng màn hình.
- Trong code của bạn, màn hình ≤500px thay đổi màu chữ .gfg thành xanh lá.
Note: Bắt buộc thêm thẻ meta viewport để media queries hoạt động chính xác.Tìm hiểu thêm về nó here.
Media Types in CSS
Media types chỉ định kiểu nào nên áp dụng cho thiết bị nào.Các loại phổ biến bao gồm:
| Media Type | Description |
|---|---|
all | Phù hợp với tất cả các thiết bị media. |
print | Được sử dụng cho máy in. |
screen | Nhắm mục tiêu vào màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v. |
speech | Được thiết kế cho trình đọc màn hình đọc to nội dung. |
More Examples of CSS Media Queries
Media Queries for Multiple Screen Sizes
HTML<!--Driver Code Starts-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Driver Code Ends-->
<style>
.gfg {
color: black;
}
@media screen and (max-width: 800px) {
.gfg {
color: blue;
}
}
@media screen and (max-width: 500px) {
.gfg {
color: green;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="gfg">Sample Example of Media Query</div>
</body>
</html>
<!--Driver Code Ends-->
In this Example:
- Các kiểu điều chỉnh linh hoạt dựa trên chiều rộng màn hình bằng media queries.
- Với màn hình 800px trở xuống, màu văn bản chuyển sang màu xanh lam.
- Với màn hình 500px trở xuống, màu văn bản chuyển sang màu xanh lá cây.
Media Queries for Multiple Screen Sizes with Additional Styles
HTML<!--Driver Code Starts-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Driver Code Ends-->
<style>
.gfg {
color: black;
font-size: 20px;
padding: 10px;
}
@media screen and (max-width: 800px) {
.gfg {
color: blue;
font-size: 18px;
}
}
@media screen and (max-width: 500px) {
.gfg {
color: green;
font-size: 16px;
text-align: center;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="gfg">Sample Example of Media Query</div>
</body>
</html>
<!--Driver Code Ends-->
In this example:
- Các kiểu điều chỉnh linh hoạt dựa trên chiều rộng màn hình sử dụng media queries.
- Với màn hình 800px trở xuống, màu chữ chuyển sang màu xanh lam, cỡ chữ giảm xuống 18px.
- Với màn hình 500px trở xuống, màu chữ chuyển sang màu xanh lục, cỡ chữ giảm xuống 16px, chữ căn giữa.
CSS Media Query Features
Media queries cho phép nhà phát triển kiểm tra các đặc điểm thiết bị khác nhau.Dưới đây là một số tính năng quan trọng:
| Feature | Description |
|---|---|
| color | Chỉ định số lượng bit trên mỗi thành phần màu cho thiết bị. |
| grid | Kiểm tra xem thiết bị là grid hay bitmap. |
| height | Đại diện cho chiều cao của viewport. |
| aspect ratio | Xác định tỷ lệ chiều rộng trên chiều cao của viewport. |
| color-index | Cho biết thiết bị có thể hiển thị bao nhiêu màu. |
| max-resolution | Độ phân giải cao nhất mà thiết bị có thể đạt được, đo bằng dpi hoặc dpcm. |
| monochrome | Hiển thị số lượng bit trên mỗi màu trên thiết bị đơn sắc. |
| scan | Đề cập đến phương pháp quét được sử dụng bởi thiết bị đầu ra. |
| update | Mô tả tốc độ thiết bị có thể cập nhật màn hình của nó. |
| width | Đại diện cho chiều rộng của viewport. |
Why Use Media Queries?
- Improves user experience: Thiết kế responsive cung cấp trải nghiệm xem tối ưu, giúp người dùng tương tác dễ hơn với trang web.
- Ensures functionality: Media queries giúp đảm bảo tất cả nội dung đều có thể truy cập và hiển thị tốt, bất kể thiết bị nào được sử dụng.
- Boosts SEO: Các công cụ tìm kiếm ưu tiên các trang web thân thiện với thiết bị di động.Thiết kế responsive cải thiện thứ hạng công cụ tìm kiếm của trang web của bạn.
Best Practices for Media Query
- Bắt đầu với phương pháp mobile-first, sau đó cải thiện cho màn hình lớn hơn.
- Sử dụng các đơn vị tương đối như em hoặc rem để linh hoạt.
- Kiểm tra thiết kế trên nhiều thiết bị và trình duyệt.