Media query là gì?
Còn gọi: truy vấn thiết bị trong CSS, media queries, @media, css media query, truy vấn media
Media query là cú pháp CSS cho phép áp dụng các quy tắc định dạng khác nhau tuỳ đặc điểm của thiết bị hoặc cửa sổ, phổ biến nhất là theo bề rộng viewport để làm giao diện responsive.
Hiểu kỹ hơn
Ví dụ @media (min-width: 768px) { ... } nghĩa là các quy tắc bên trong chỉ áp dụng khi viewport rộng từ 768 px trở lên. Cách viết mobile-first dùng min-width: viết giao diện mobile trước, rồi bổ sung cho màn hình lớn. Mỗi giá trị bề rộng chính là một breakpoint mà designer cần thiết kế. Ngoài bề rộng, media query còn đọc được nhiều đặc điểm khác: hướng màn hình dọc hay ngang, prefers-color-scheme để biết người dùng bật giao diện tối, prefers-reduced-motion để giảm hiệu ứng, hover để biết thiết bị có chuột hay chỉ cảm ứng, và print khi in trang. CSS mới còn có container query, cho component thay đổi theo bề rộng khối chứa nó thay vì cả màn hình.
