CSS media queries

Module CSS media queries cho phép kiểm tra và truy vấn các giá trị viewport cũng như các tính năng của trình duyệt hay thiết bị, để áp dụng có điều kiện các style CSS dựa trên môi trường người dùng hiện tại. Media query được sử dụng trong quy tắc CSS @media và các ngữ cảnh cũng như ngôn ngữ khác như HTML và JavaScript.

Media query là thành phần quan trọng của responsive design. Chúng cho phép thiết lập có điều kiện các style CSS tùy thuộc vào sự hiện diện hay giá trị của các đặc tính thiết bị. Thông thường người ta sử dụng media query dựa trên kích thước viewport để thiết lập bố cục phù hợp trên các thiết bị với kích thước màn hình khác nhau — ví dụ ba cột trên màn hình rộng hoặc một cột duy nhất trên màn hình hẹp.

Các ví dụ phổ biến khác bao gồm tăng kích thước font chữ và ẩn menu điều hướng khi in một trang, điều chỉnh khoảng cách giữa các đoạn văn khi trang được xem ở chế độ dọc hay ngang, hoặc tăng kích thước nút để cung cấp vùng nhấn lớn hơn trên màn hình cảm ứng.

Trong CSS, sử dụng @media at-rule để áp dụng có điều kiện một phần của style sheet dựa trên kết quả của media query. Để áp dụng có điều kiện một style sheet hoàn chỉnh, sử dụng @import.

Khi thiết kế các thành phần HTML có thể tái sử dụng, bạn cũng có thể sử dụng container queries, cho phép bạn áp dụng style dựa trên kích thước của phần tử chứa thay vì viewport hay các đặc tính thiết bị khác.

Sử dụng media query: Giới thiệu media query, cú pháp của chúng, và các toán tử và media feature được sử dụng để xây dựng biểu thức media query.
Học: Cơ bản về media query: Giới thiệu về media query và các phương pháp sử dụng chúng để tạo responsive design.
Kiểm tra media query: Mô tả cách sử dụng media query trong mã JavaScript của bạn để xác định trạng thái của một thiết bị và thiết lập các listener thông báo cho mã khi kết quả của media query thay đổi (chẳng hạn như khi người dùng xoay màn hình hoặc thay đổi kích thước trình duyệt).
Sử dụng media query cho khả năng truy cập: Tìm hiểu cách media query có thể giúp người dùng hiểu trang web của bạn tốt hơn.
In ấn: Mẹo và kỹ thuật giúp cải thiện đầu ra in của nội dung web.
Hình ảnh responsive: Tìm hiểu cách sử dụng media query với sizes để triển khai các giải pháp hình ảnh responsive trên trang web.