Truy vấn phương tiện CSS
Truy vấn phương tiện CSS
Quy tắc @media , được giới thiệu trong CSS2, giúp 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.
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
- hướng của khung nhìn (ngang hoặc dọc)
- nghị quyết
Sử dụng truy vấn phương tiện là một kỹ thuật phổ biến để cung cấp 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ư điện thoại iPhone và Android).
Các loại phương tiện CSS
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for print preview mode | |
| screen | Used for computer screens, tablets, smart-phones etc. |
Các tính năng truyền thông phổ biến của CSS
Dưới đây là một số tính năng đa phương tiện thường được sử dụng:
| Value | Description |
|---|---|
| orientation | Orientation of the viewport. Landscape or portrait |
| max-height | Maximum height of the viewport |
| min-height | Minimum height of the viewport |
| height | Height of the viewport (including scrollbar) |
| max-width | Maximum width of the viewport |
| min-width | Minimum width of the viewport |
| width | Width of the viewport (including scrollbar) |
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 tính năng phương tiện, có thể phân giải thành đúng hoặc sai.
@media not|only mediatype and ( media feature )
and ( media feature ) {
CSS-Code;
}Loại phương tiện là tùy chọn (nếu bị bỏ qua, nó sẽ được đặt thành tất cả). Tuy nhiên, nếu bạn sử dụng not hoặc only , bạn cũng phải chỉ định loại mediatype .
Kết quả của truy vấn là đúng 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ị trên đó và tất cả các tính năng phương tiện trong truy vấn phương tiện đều đúng. Khi truy vấn phương tiện là đúng, biểu định kiểu hoặc quy tắc 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.
Ý nghĩa của các từ khóa not , only và and :
không: Từ khóa này đảo ngược ý nghĩa của toàn bộ truy vấn phương tiện.
chỉ: Từ khóa này ngăn các trình duyệt cũ hơn không hỗ trợ truy vấn phương tiện áp dụng các kiểu được chỉ định. Nó không có tác dụng trên các trình duyệt hiện đại.
và: Từ khóa này kết hợp loại phương tiện và một hoặc nhiều tính năng phương tiện.
Bạn cũng có thể liên kết tới các biểu định kiểu khác nhau cho các phương tiện khác nhau và các độ rộng khác nhau của cửa sổ trình duyệt (chế độ xem):
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width:
480px)"
href="example1.css">
<link rel="stylesheet" media="screen and (min-width:
701px) and (max-width: 900px)" href="example2.css">
etc....
Truy vấn phương tiện Ví dụ đơn giản
Một cách để sử dụng truy vấn phương tiện là có phần CSS thay thế ngay bên trong biểu định kiểu của bạn.
Ví dụ sau thay đổi màu nền thành xanh nhạt nếu khung nhìn rộng 480 pixel hoặc rộng hơn (nếu khung nhìn nhỏ hơn 480 pixel, màu nền sẽ có màu hồng):
Ví dụ
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Hãy tự mình thử »Ví dụ sau đây cho thấy một menu sẽ nổi ở bên trái trang nếu khung nhìn rộng 480 pixel hoặc rộng hơn (nếu khung nhìn nhỏ hơn 480 pixel, menu sẽ nằm ở trên cùng của nội dung):
Ví dụ
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Hãy tự mình thử »Ví dụ về truy vấn phương tiện khác
Để biết thêm ví dụ về truy vấn phương tiện, hãy truy cập trang tiếp theo: Ví dụ về CSS MQ .
Tham khảo CSS @media
Để biết 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 .
