Truy vấn Đa phương tiện CSS

CSS2 đã giới thiệu loại phương tiện

CSS2 đã giới thiệu @media Quy tắc này cho phép định nghĩa các quy tắc giao diện khác nhau cho các loại phương tiện khác nhau.

Ví dụ: Bạn có thể có một bộ quy tắc giao diện cho màn hình máy tính, một bộ quy tắc cho máy in, một bộ quy tắc cho thiết bị cầm tay, thậm chí còn có một bộ quy tắc cho tivi, v.v.

不幸 thay, ngoài loại truyền thông in, các loại truyền thông này chưa bao giờ được hỗ trợ lớn trên thiết bị.

CSS3 đã giới thiệu phương pháp truyền thông

phương pháp truyền thông CSS3 mở rộng khái niệm loại truyền thông của CSS2: chúng không tìm kiếm loại thiết bị mà tập trung vào khả năng của thiết bị.

phương pháp truyền thông có thể kiểm tra nhiều điều, chẳng hạn như:

  • độ rộng và chiều cao của viewport
  • độ rộng và chiều cao của thiết bị
  • hướng (máy tính bảng hoặc điện thoại thông minh ở chế độ ngang hoặc dọc)
  • độ phân giải

sử dụng phương pháp truyền thông là một kỹ thuật phổ biến, có thể cung cấp các bảng樣式 tùy chỉnh 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 (ví dụ như iPhone và điện thoại Android).

hỗ trợ trình duyệt

số trong bảng chỉ ra sự hỗ trợ hoàn toàn @media phiên bản đầu tiên của trình duyệt hỗ trợ quy tắc.

thuộc tính
@media 21.0 9.0 3.5 4.0 9.0

cú pháp phương pháp truyền thông

phương pháp truyền thông bao gồm một loại truyền thông và có thể chứa một hoặc nhiều biểu thức, các biểu thức này có thể được phân tích thành true hoặc false.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

nếu loại truyền thông được chỉ định phù hợp với loại thiết bị đang hiển thị tài liệu và tất cả các biểu thức trong phương pháp truyền thông đều là true, kết quả của phương pháp truyền thông sẽ là true. Khi phương pháp truyền thông là true, sẽ áp dụng bảng樣式 hoặc quy tắc樣式 tương ứng, và tuân theo quy tắc kết hợp bình thường.

trừ khi bạn sử dụng toán tử not hoặc only, loại truyền thông là tùy chọn và ẩn all loại.

Bạn cũng có thể sử dụng các bảng樣式 khác nhau cho các loại truyền thông khác nhau:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 loại truyền thông

giá trị mô tả
all dành cho tất cả các loại thiết bị truyền thông.
print dành cho máy in.
screen dành cho màn hình máy tính, máy tính bảng, điện thoại thông minh và nhiều thiết bị khác.
speech dành cho người sử dụng screen đọc to trang web.

một ví dụ đơn giản về phương pháp truyền thông

một cách sử dụng phương pháp là có một phần CSS dự phòng trong bảng樣式.

dưới đây là một ví dụ, nếu độ rộng của viewport là 480 pixel hoặc rộng hơn, sẽ thay đổi màu nền thành xanh lá cây nhạt (nếu viewport nhỏ hơn 480 pixel, màu nền sẽ là hồng):

thí dụ

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Thử nghiệm cá nhân

dưới đây là một menu, nếu độ rộng của viewport là 480 pixel hoặc rộng hơn, menu sẽ trôi qua bên trái của trang (nếu viewport nhỏ hơn 480 pixel, menu sẽ nằm ở trên nội dung):

thí dụ

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

Thử nghiệm cá nhân

Các mô hình Truy vấn Đa phương tiện khác

Để xem thêm các mô hình Truy vấn Đa phương tiện, hãy truy cập trang tiếp theo:Mô hình MQ CSS.

Tài liệu tham khảo Quy tắc @media CSS

Xem Tham khảo của chúng tôi để có đầy đủ thông tin về tất cả các loại Đa phương tiện và tính năng/biểu thức: Quy tắc @media trong Tham khảo CSS.