Quy tắc CSS @media
Ví dụ
Thay đổi màu nền của phần tử <body> thành "lightblue" khi cửa sổ trình duyệt rộng 600px trở xuống:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Quy tắc @media được sử dụng trong truy vấn phương tiện để áp dụng các kiểu khác nhau cho các loại/thiết bị phương tiện khác nhau.
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ị
- 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 để cung cấp biểu định kiểu phù hợp (thiết kế web đáp ứng) 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.
Bạn cũng có thể sử dụng truy vấn phương tiện để chỉ định rằng một số kiểu nhất định chỉ dành cho tài liệu in hoặc dành cho trình đọc màn hình (loại phương tiện: bản in, màn hình hoặc giọng nói).
Ngoài các loại phương tiện, còn có các tính năng phương tiện. Các tính năng phương tiện cung cấp chi tiết cụ thể hơn cho các truy vấn phương tiện, bằng cách cho phép kiểm tra một tính năng cụ thể của tác nhân người dùng hoặc thiết bị hiển thị. Ví dụ: bạn chỉ có thể áp dụng kiểu cho những màn hình lớn hơn hoặc nhỏ hơn một chiều rộng nhất định.
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 đủ quy tắc @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
Cú pháp CSS
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}ý nghĩa của các từ khóa not , only và and :
not: Từ khóa not đảo ngược ý nghĩa của toàn bộ truy vấn phương tiện.
only: Từ khóa only ngăn các trình duyệt cũ hơn không hỗ trợ truy vấn phương tiện với các tính năng 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 và kết hợp tính năng phương tiện với loại phương tiện hoặc các tính năng phương tiện khác.
Tất cả đều là tùy chọn. Tuy nhiên, nếu bạn sử dụng not hoặc only , bạn cũng phải chỉ định loại phương tiện.
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, như thế này:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....Thêm ví dụ
Ví dụ
Ẩn một phần tử khi chiều rộng của trình duyệt từ 600px trở xuống:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Hãy tự mình thử »Ví dụ
Sử dụng truy vấn phương tiện để đặt màu nền thành hoa oải hương nếu khung nhìn rộng 800 pixel hoặc rộng hơn, thành màu xanh nhạt nếu khung nhìn rộng từ 400 đến 799 pixel. Nếu khung nhìn nhỏ hơn 400 pixel, màu nền là xanh nhạt:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Hãy tự mình thử »Ví dụ
Tạo menu điều hướng đáp ứng (hiển thị theo chiều ngang trên màn hình lớn và theo chiều dọc trên màn hình nhỏ):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Hãy tự mình thử »Ví dụ
Sử dụng truy vấn phương tiện để tạo bố cục cột đáp ứng:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Hãy tự mình thử »Ví dụ
Truy vấn phương tiện cũng có thể được sử dụng để thay đổi bố cục của trang tùy thuộc vào hướng của trình duyệt. Bạn có thể có một tập hợp thuộc tính CSS sẽ chỉ áp dụng khi cửa sổ trình duyệt rộng hơn chiều cao của nó, được gọi là hướng "Phong cảnh".
Sử dụng màu nền xanh nhạt nếu hướng ở chế độ ngang:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Hãy tự mình thử »Ví dụ
Sử dụng mediaqueries để đặt màu văn bản thành màu xanh lục khi tài liệu được hiển thị trên màn hình và thành màu đen khi tài liệu được in:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Hãy tự mình thử »Ví dụ
Danh sách được phân tách bằng dấu phẩy : thêm một truy vấn phương tiện bổ sung vào một truy vấn phương tiện đã có sẵn, sử dụng dấu phẩy (điều này sẽ hoạt động giống như toán tử OR):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Truy vấn phương tiện CSS
Hướng dẫn CSS: Ví dụ về CSS Media Queries
Hướng dẫn RWD: Thiết kế web đáp ứng với truy vấn phương tiện
Hướng dẫn JavaScript: Phương thức window.matchMedia()
