Media queries và đặc tính thiết bị
Để hướng mục tiêu một thiết bị dựa trên đặc tính của nó, bạn thêm đặc tính và giá trị của nó vào
thuộc tính media, sử dụng cú pháp:
media=”devices and/or (feature:value)”
nơi feature là tên của đặc tính media và value là giá trị của đặc tính. Từ khóa and và or được sử
dụng để tạo media queries cái liên quan đến các thiết bị khác nhau hay các đặc tính khác nhau
hay sự kết hợp cả hai.
Quy tắc @media và @import sử dụng cú pháp tương tự:
@media devices and/or (feature:value){
style rules
}
và
@import url(url) devices and/or (feature:value)
Ví dụ, media queries sau áp dụng quy tắc style chỉ cho thiết bị screen với width 320 pixels:
@media screen (device-width:320px){
style rules
}
Sau đây là danh sách các đặc tính thiết bị được hỗ trợ bởi HTML và CSS:
Tất cả các đặc tính media trong danh sách trên ngoại trừ orientation cũng chấp nhận tiền tố
min- và max-, nơi min- cung cấp một giá trị tối thiểu cho đặc tính được chỉ ra, và max- cung
cấp một giá trị tối đa của đặc tính. Vì vậy, media query sau áp dụng quy tắc style chỉ cho
thiết bị screen width của nó có giá trị tối đa là 700 pixels:
@media screen and (max-width:700px){
style rules
}
Tương tự, media quey sau áp dụng quy tắc style chỉ cho screen cái rộng tối thiểu 400 pixels:
@media screen and (min-width:400px){
style rules
}
Bạn cũng có thể kết hợp nhiều đặc tính media sử dụng toán tử luận lí như and, not và or.
Query sau áp dụng styles tới tất cả dạng media nhưng chỉ khi width của thiết bị đầu ra
ở giữa 320 và 480 pixels:
@media all and (min-width:320px and max-width:480px){
style rules
}
Một vài truy vấn media được điều hướng tới thiết bị cái không có một đăc tính cụ thể.
Cái này được thực hiện bằng cách áp dụng toán tử not, cái phủ định bất cứ dặc tính nào
được tìm thấy trong expression. Ví dụ, query sau áp dụng chỉ cho thiết bị media cái không
phải là screen và không có width tối đa là 480 pixels:
@media not screen and (max-width:480px){
style rules
}
Cho một vài đặc tính , bạn không phải chỉ ra một giá trị, chỉ chỉ ra sự tồn tại của đặc tính.
Query sau khớp thiết bị screen cái hỗ trợ màu:
@media screen and (color){
style rules
}
Cuối cùng, cho các trình duyệt cũ hơn cái không hỗ trợ media queries, CSS 3 cung cấp từ khóa
only để che giấu style sheet khỏi các trình duyệt đó. Trong code sau, các trình duyệt cũ hơn
sẽ biên dịch only như một tên thiết bị không được hỗ trợ vì vậy không áp dụng quy tắc styles,
trong khi các trình duyệt mới hơn nhận ra từ khóa và tiếp tục áp dụng quy tắc style:
@media only screen and (color){
style rules
}
Tất cả trình duyệt hiện tại đều hỗ trợ media queries, nhưng bạn vẫn sẽ thấy từ khóa only được
sử dụng trong style sheet của nhiều website.