Truy vấn phương tiện CSS
Các loại phương tiện được giới thiệu CSS2
Quy @mediatắc, đượ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.
Thật không may, 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.
Các truy vấn phương tiện được giới thiệu CSS3
Truy vấn phương tiện trong CSS3 mở rộng ý tưởng về loại phương tiệ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?)
- nghị quyết
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).
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ @mediaquy tắc.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Cú pháp truy vấn phương tiện
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 and (expressions) {
CSS-Code;
}
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à
allloạ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 (expressions)"
href="print.css">
Các loại phương tiện CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Ví dụ đơn giản về truy vấn phương tiện
Một cách để sử dụng truy vấn phương tiện là có một phần CSS thay thế ngay bên trong trang định kiểu của bạn.
Ví dụ sau thay đổi màu nền thành màu xanh lục nhạt nếu chế độ xem rộng 480 pixel hoặc rộng hơn (nếu chế độ xem nhỏ hơn 480 pixel, màu nền sẽ là màu hồng):
Thí dụ
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Ví dụ sau cho thấy một menu sẽ nổi ở bên trái của trang nếu chế độ xem rộng 480 pixel hoặc rộng hơn (nếu chế độ xem nhỏ hơn 480 pixel, menu sẽ nằm trên đầu nội dung):
Thí dụ
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Thêm Ví dụ về Truy vấn Phương tiện
Để biết thêm nhiều ví dụ về truy vấn phương tiện, hãy chuyển đến trang tiếp theo: Ví dụ CSS MQ .
Tham chiếu CSS @media
Để có cái nhìn tổng quan đầy đủ về tất cả các loại phương tiện và tính năng / biểu thức, vui lòng xem quy tắc @media trong tài liệu tham khảo CSS của chúng tôi .