Giới thiệu về truy vấn media (media queries)
Truy vấn media được sử dụng để làm liên quan một style sheet hay một quy tắc style với một dạng
thiết bị cụ thể hay danh sách các đặc tính thiết bị. Để tạo một media query bên trong một file
HTML thêm thuộc tính media sau vào phần tử link hay style trong thẻ head tài liệu.
media=”devices”
nơi devices là một danh sách chia tách bởi dấu phẩy các dạng media (đa phương tiện) được hỗ
trợ liên quan đến một style sheet được chỉ ra.
Ví dụ, phần tử link sau truy cập file style sheet output.css, nhưng chỉ khi thiết bị là một
máy in hay máy phóng.
<link href=”output.css” media=”print,projection”/>
Nếu bất cứ thiết bị khác truy cập trang web này, nó sẽ không load file style sheet output.css.
Bảng sau liệt kê các giá trị dạng media cơ bản cho thuộc tính media.
Khi không thuộc tính media nào được sử dụng, style sheet được cho là sẽ áp dụng cho tất cả các
thiết bị truy cập trang web.
Quy tắc @media
Media queries cũng có thể được sử dụng để liên quan các quy tắc style cụ thể với thiết bị cụ
thể bằng cách bao gồm quy tắc @media sau trong file style sheet CSS:
@media devices{
style rules
}
nơi devices là dang media được hỗ trợ và style rules là các quy tắc style liên quan đến các
thiết bị đó.
Ví dụ, style sheet sau được chia thành ba phần: quy tắc style ban đầu cái thiết lập font color
của tất cả h1 heading tag bất kể thiết bị, phần thứ hai thiết lập font size cho h1 heading tag
trên thiết bị screen và TV, và phần thứ ba thiết lập font size cho h1 heading tag cái được
in ấn:
h1{
color:red;
}
@media screen,tv{
h1{font-size:2em}
}
@media print{
h1{font-size:16pt;}
}
Chú ý rằng trong style sheet này, font size cho thiết bị screen và tv được thể hiện sử dụng
đơn vị em tương đối. Nhưng font size cho thiết bị in ấn được thể hiện sử dụng points, cái
là đơn vị kích cỡ phù hợp hơn cho phương tiện đó.
Quy tắc @import
Cuối cùng, bạn có thể chỉ ra thiết bị media khi nhập khẩu một style sheet vào một style sheet
khác bằng cách thêm dạng media vào quy tắc @import.
Ví dụ, quy tắc CSS sau nhập khẩu file style sheet screen.css chỉ khi là một screen hay thiết
bị máy phóng đang được sử dụng.
@import url(“screen.css”) screen,projection;