Quy tắc CSS @media
Thí 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;
}
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Quy @media
tắc được sử dụng trong các 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ị
- đị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 để 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 các kiểu nhất định chỉ dành cho tài liệu in hoặc cho trình đọc màn hình (kiểu trung gian: 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. 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 có thể áp dụng kiểu chỉ 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 từ khóa not , only and 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 duy nhất 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 một tính năng phương tiện với một loại phương tiện hoặc các tính năng phương tiện khác.
Chúng đều là tùy chọn. Tuy nhiên, nếu bạn không sử dụng hoặc chỉ sử dụng , bạn cũng phải chỉ định một 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ư sau:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Các loại phương tiện
Value | Description |
---|---|
all | Default. 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 |
Tính năng phương tiện
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Các ví dụ khác
Thí dụ
Ẩn một phần tử khi chiều rộng của trình duyệt rộng từ 600px trở xuống:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Thí dụ
Sử dụng phương tiện truyền thông để đặt màu nền thành màu oải hương nếu chế độ xem rộng 800 pixel hoặc rộng hơn, thành màu xanh nhạt nếu chế độ xem rộng từ 400 đến 799 pixel. Nếu chế độ xem nhỏ hơn 400 pixel, màu nền là màu xanh lam 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;
}
}
Thí 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%;
}
}
Thí 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%;
}
}
Thí dụ
Sử dụng các truy vấn phương tiện để tạo một trang web đáp ứng:
Thí 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 các 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 "Ngang".
Sử dụng màu nền xanh lam nhạt nếu hướng ở chế độ ngang:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Thí dụ
Sử dụng phương tiện truyền thông để đặ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 nó được in:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Thí 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 đã tồn tại, sử dụng dấu phẩy (điều này sẽ hoạt động giống như một 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;
}
}
Các 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ề Truy vấn Phương tiện CSS
Hướng dẫn về 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 ()