Câu trả lời:
Sử dụng dấu phẩy để chỉ định hai (hoặc nhiều) quy tắc khác nhau:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
Từ https://developer.mozilla.org/en/CSS/Media_queries/
... Ngoài ra, bạn có thể kết hợp nhiều truy vấn phương tiện trong danh sách được phân tách bằng dấu phẩy; nếu bất kỳ truy vấn phương tiện nào trong danh sách là đúng, biểu định kiểu được liên kết sẽ được áp dụng. Đây là tương đương với một hoạt động "hoặc" hợp lý.
Câu trả lời nhanh.
Quy tắc riêng với dấu phẩy:
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Câu trả lời dài.
Có rất nhiều ở đây, nhưng tôi đã cố gắng làm cho thông tin trở nên dày đặc, không chỉ là văn bản mượt mà. Đó là một cơ hội tốt để tìm hiểu bản thân mình! Hãy dành thời gian để đọc một cách có hệ thống và tôi hy vọng nó sẽ hữu ích.
Các truy vấn phương tiện về cơ bản được sử dụng trong thiết kế web để tạo ra trải nghiệm duyệt theo thiết bị hoặc tình huống cụ thể; điều này được thực hiện bằng cách sử dụng @mediakhai báo trong CSS của một trang . Điều này có thể được sử dụng để hiển thị một trang web khác nhau trong một số trường hợp lớn: cho dù bạn đang ở trên máy tính bảng hoặc TV với các tỷ lệ khung hình khác nhau, cho dù thiết bị của bạn có màn hình màu hay đen trắng, hoặc, có lẽ là thường xuyên nhất, khi người dùng thay đổi kích thước trình duyệt của họ hoặc chuyển đổi giữa các thiết bị duyệt với các kích thước màn hình khác nhau (nói chung, thiết kế như thế này được gọi là Thiết kế Web đáp ứng )
Khi thiết kế cho các tình huống này, dường như có bốn Toán tử logic có thể được sử dụng để yêu cầu kết hợp các yêu cầu phức tạp hơn khi nhắm mục tiêu vào nhiều loại thiết bị hoặc kích thước khung nhìn .
(Lưu ý: Nếu bạn không hiểu sự khác biệt giữa quy tắc phương tiện, truy vấn phương tiện và truy vấn tính năng, trước tiên hãy duyệt phần dưới của câu trả lời này để hiểu rõ hơn một chút về thuật ngữ liên quan đến cú pháp truy vấn phương tiện
1. VÀ ( và từ khóa)
Yêu cầu tất cả các điều kiện được chỉ định phải được đáp ứng trước khi các quy tắc tạo kiểu sẽ có hiệu lực.
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
Các quy tắc kiểu dáng được chỉ định sẽ không được áp dụng trừ khi tất cả các điều sau đây được đánh giá là đúng:
Lưu ý: Tôi tin rằng được sử dụng cùng nhau, ba truy vấn tính năng này tạo thành một truy vấn phương tiện duy nhất .
2. HOẶC ( Danh sách được phân tách bằng dấu phẩy )
Thay vì một từ khóa hoặc từ khóa, các danh sách được phân tách bằng dấu phẩy được sử dụng để kết hợp nhiều truy vấn phương tiện với nhau để tạo thành một quy tắc phương tiện phức tạp hơn
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Các quy tắc kiểu dáng được chỉ định sẽ có hiệu lực khi bất kỳ một truy vấn phương tiện nào được đánh giá là đúng :
3. KHÔNG ( không phải từ khóa)
Các không từ khóa có thể được sử dụng để phủ nhận một đơn truy vấn phương tiện truyền thông (và KHÔNG phải là một phương tiện truyền thông đầy đủ cai trị --meaning rằng nó chỉ phủ nhận mục giữa một tập hợp các dấu phẩy và không đầy đủ các phương tiện truyền thông cai trị sau tuyên bố @media).
Tương tự, lưu ý rằng từ khóa không phủ nhận các truy vấn phương tiện, nó không thể được sử dụng để phủ định một truy vấn tính năng riêng lẻ trong một truy vấn phương tiện. *
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
Kiểu dáng được chỉ định ở đây sẽ có hiệu lực nếu
Nói cách khác, nếu loại phương tiện là 'màn hình' và độ phân giải tối thiểu là 300 dpi, quy tắc sẽ không có hiệu lực trừ khi độ rộng tối thiểu của chế độ xem tối thiểu là 800 pixel.
(Từ khóa không có thể là một chút sôi nổi để nêu. Hãy cho tôi biết nếu tôi có thể làm tốt hơn.)
4. CHỈ ( chỉ từ khóa)
Theo tôi hiểu, từ khóa duy nhất được sử dụng để ngăn các trình duyệt cũ hiểu sai các truy vấn phương tiện mới hơn như loại phương tiện hẹp hơn, được sử dụng trước đó. Khi được sử dụng một cách chính xác, các trình duyệt cũ hơn / không tuân thủ chỉ nên bỏ qua kiểu dáng hoàn toàn.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Một trình duyệt cũ hơn / không tuân thủ sẽ hoàn toàn bỏ qua dòng mã này, tôi tin rằng nó sẽ đọc từ khóa duy nhất và coi đó là một loại phương tiện không chính xác . (Xem tại đây và tại đây để biết thêm thông tin từ những người thông minh hơn)
ĐỂ BIẾT THÊM THÔNG TIN
Để biết thêm thông tin (bao gồm nhiều tính năng có thể được truy vấn), hãy xem: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
Lưu ý: Tôi cần học thuật ngữ sau đây cho mọi thứ ở đây để có ý nghĩa, đặc biệt liên quan đến từ khóa không . Đây là như tôi hiểu nó:
Một quy tắc truyền thông (MDN dường như cũng gọi các tuyên bố truyền thông này) bao gồm thuật ngữ này @mediavới tất cả các truy vấn phương tiện tiếp theo của nó
@media all and (min-width: 800px)
@media only screen and (max-resolution:800dpi), not print
@media screen and (min-width: 700px), (orientation: landscape)
@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)
Một truy vấn phương tiện là một tập hợp các truy vấn tính năng. Chúng có thể đơn giản như một truy vấn tính năng hoặc chúng có thể sử dụng và từ khóa để tạo thành một truy vấn phức tạp hơn. Các truy vấn phương tiện có thể được phân tách bằng dấu phẩy để tạo thành các quy tắc phương tiện phức tạp hơn (xem hoặc từ khóa ở trên).
screen (Lưu ý: Chỉ có một truy vấn tính năng được sử dụng ở đây.)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
KHÔNG handheld, (min-width: 650px). (Lưu ý dấu phẩy: có hai truy vấn phương tiện ở đây.)
Một tính năng truy vấn là phần cơ bản nhất của một phương tiện truyền thông quy tắc và chỉ đơn giản là liên quan đến một tính năng nhất định và tình trạng của nó trong một tình huống truy cập nhất định.
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Đoạn mã và thông tin có nguồn gốc từ:
Truy vấn phương tiện CSS của Người đóng góp Mozilla (được cấp phép theo CC-BY-SA 2.5 ). Một số mẫu mã đã được sử dụng với những thay đổi nhỏ để (hy vọng) làm tăng sự rõ ràng của lời giải thích.
Có hai cách để viết một truy vấn phương tiện thích hợp trong css. Nếu bạn đang viết truy vấn phương tiện trước khi thiết bị lớn hơn thì cách viết chính xác sẽ là:
@media only screen
and (min-width : 415px){
/* Styles */
}
@media only screen
and (min-width : 769px){
/* Styles */
}
@media only screen
and (min-width : 992px){
/* Styles */
}
Nhưng nếu bạn đang viết truy vấn phương tiện cho thiết bị nhỏ hơn trước thì nó sẽ giống như:
@media only screen
and (max-width : 991px){
/* Styles */
}
@media only screen
and (max-width : 768px){
/* Styles */
}
@media only screen
and (max-width : 414px){
/* Styles */
}