1. Các loại truy vấn phương tiện được giới thiệu trong CSS2

Quy tắc @media, được giới thiệu trong CSS2, giúp bạn có thể xác định các quy tắc kiểu khác nhau cho các loại phương tiện khác nhau

Ví dụ: Bạn có thể có một bộ quy tắc kiểu cho màn hình máy tính, một bộ cho máy in, một bộ cho thiết bị cầm tay, một bộ cho thiết bị loại tivi, …v.v.

Những loại phương tiện này không bao giờ được hỗ trợ nhiều bởi các thiết bị, ngoài loại phương tiện in

2. Các loại truy vấn phương tiện được giới thiệu trong CSS3

Truy vấn phương tiện trong CSS3 mở rộng ý tưởng về loại phương tiện dựa trên CSS2: Thay vì tìm kiếm một loại thiết bị, họ xem xét khả năng của thiết bị

Truy vấn phương tiện có thể được sử dụng để kiểm tra nhiều thứ, chẳng hạn như:

• chiều rộng và chiều cao của khung nhìn
• chiều rộng và chiều cao của thiết bị
• định hướng (máy tính bảng / điện thoại ở chế độ ngang hay dọc?)
• sự phân giải

Sử dụng truy vấn phương tiện là một kỹ thuật phổ biến để phân phối biểu định kiểu phù hợp cho máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại di động (chẳng hạn như iPhone và điện thoại Android)

3. Cú pháp truy vấn phương tiện trong CSS

Truy vấn phương tiện bao gồm một loại phương tiện và có thể chứa một hoặc nhiều biểu thức, các biểu thức này phân giải thành true hoặc false

@media not | only mediatype và (biểu thức) {
   code CSS;
}

Kết quả của truy vấn là true nếu loại phương tiện được chỉ định khớp với loại thiết bị mà tài liệu đang được hiển thị và tất cả các biểu thức trong truy vấn phương tiện đều đúng. Khi một truy vấn phương tiện là true, các quy tắc kiểu hoặc bảng định kiểu tương ứng sẽ được áp dụng, tuân theo các quy tắc xếp tầng thông thường

Trừ khi bạn sử dụng toán tử not hoặc only, loại phương tiện là tùy chọn và tất cả loại sẽ được ngụ ý

Bạn cũng có thể có các bảng định kiểu khác nhau cho các phương tiện khác nhau:

<link rel = "stylesheet" media = "mediatype and | not | only (biểu thức)" href = "print.css">

Ví dụ:

4. Các trình duyệt hỗ trợ

Quy tắc
@media	21.0	9.0	3.5	4.0	9.0