Sự khác biệt giữa màn hình trên màn hình và các màn hình khác nhau trong các truy vấn phương tiện là gì?

Sự khác biệt giữa screenvà only screentrong các truy vấn phương tiện truyền thông là gì?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Tại sao chúng ta bắt buộc phải sử dụng only screen? Liệu screenbản thân nó không cung cấp đủ thông tin để được trả lại chỉ cho màn hình?

Tôi đã thấy nhiều trang web phản hồi bằng bất kỳ cách nào trong ba cách khác nhau sau:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

Hãy chia nhỏ từng ví dụ của bạn.

@media (max-width:632px)

Đây là một cửa sổ có max-widthkích thước 632px mà bạn muốn áp dụng các kiểu này. Ở kích thước đó, bạn sẽ nói về bất cứ thứ gì nhỏ hơn màn hình máy tính để bàn trong hầu hết các trường hợp.

@media screen and (max-width:632px)

Điều này đang nói cho một thiết bị có một screenvà một cửa sổ với max-width632px áp dụng kiểu dáng. Điều này gần như giống hệt như ở trên, ngoại trừ bạn đang chỉ định screentrái ngược với các loại phương tiện có sẵn khác mà loại khác phổ biến nhất print.

@media only screen and (max-width:632px)

Dưới đây là một trích dẫn trực tiếp từ W3C để giải thích điều này.

Từ khóa 'chỉ' cũng có thể được sử dụng để ẩn biểu định kiểu khỏi các tác nhân người dùng cũ. Tác nhân người dùng phải xử lý các truy vấn phương tiện bắt đầu bằng 'chỉ' như thể không có từ khóa 'chỉ'.

Vì không có loại phương tiện nào là "chỉ", nên các biểu định kiểu nên bị bỏ qua bởi các trình duyệt cũ hơn.

Đây là liên kết đến trích dẫn đó được hiển thị trong ví dụ 9 trên trang đó.

Hy vọng điều này làm sáng tỏ một số truy vấn phương tiện truyền thông.

BIÊN TẬP:

Hãy chắc chắn kiểm tra @hybrids câu trả lời tuyệt vời về cách onlytừ khóa thực sự được xử lý.

Sau đây là từ tài liệu Adobe .

Đặc tả truy vấn phương tiện cũng cung cấp từ khóa only, nhằm ẩn các truy vấn phương tiện khỏi các trình duyệt cũ hơn. Giống như not, từ khóa phải đến khi bắt đầu khai báo. Ví dụ:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Các trình duyệt không nhận ra các truy vấn phương tiện sẽ yêu cầu một danh sách các loại phương tiện được phân tách bằng dấu phẩy và thông số kỹ thuật nói rằng chúng nên cắt bớt từng giá trị ngay trước ký tự không phải chữ đầu tiên không phải là dấu gạch nối. Vì vậy, một trình duyệt cũ sẽ diễn giải ví dụ trước như sau:

media="only"

Vì không có loại phương tiện nào như chỉ, nên biểu định kiểu bị bỏ qua. Tương tự, một trình duyệt cũ sẽ diễn giải

media="screen and (min-width: 401px) and (max-width: 600px)"

như

media="screen"

Nói cách khác, nó nên áp dụng quy tắc kiểu cho tất cả các thiết bị màn hình, mặc dù nó không biết ý nghĩa của các truy vấn phương tiện.

Thật không may, IE 6 Ném8 không thực hiện đúng thông số kỹ thuật.

Thay vì áp dụng kiểu cho tất cả các thiết bị màn hình, nó hoàn toàn bỏ qua biểu định kiểu.

Mặc dù hành vi này, vẫn chỉ nên dùng tiền tố truy vấn phương tiện nếu bạn muốn ẩn kiểu này khỏi các trình duyệt khác, ít phổ biến hơn.

Vì vậy, sử dụng

media="only screen and (min-width: 401px)"

và

media="screen and (min-width: 401px)"

sẽ có tác dụng tương tự trong IE6-8: cả hai sẽ ngăn những kiểu đó được sử dụng. Họ sẽ, tuy nhiên, vẫn sẽ được tải xuống.

Ngoài ra, trong các trình duyệt hỗ trợ truy vấn phương tiện CSS3, cả hai phiên bản sẽ tải kiểu nếu chiều rộng khung nhìn lớn hơn 401pxvà loại phương tiện là màn hình.

Tôi không hoàn toàn chắc chắn trình duyệt nào không hỗ trợ truy vấn phương tiện CSS3 sẽ cần onlyphiên bản

media="only screen and (min-width: 401px)" 

như trái ngược với

media="screen and (min-width: 401px)"

để đảm bảo nó không được hiểu là

media="screen"

Nó sẽ là một thử nghiệm tốt cho những người có quyền truy cập vào một phòng thí nghiệm thiết bị.

Để tạo kiểu cho nhiều điện thoại thông minh có màn hình nhỏ hơn, bạn có thể viết:

@media screen and (max-width:480px) { … } 

Để chặn các trình duyệt cũ hơn nhìn thấy biểu định kiểu điện thoại iPhone hoặc Android, bạn có thể viết:

@media only screen and (max-width: 480px;) { … } 

Đọc bài viết này để biết thêm http://webdesign.about.com/od/css3/a/css3-media-queries.htmlm

Trả lời bởi @hy điều là khá nhiều thông tin, ngoại trừ nó không giải thích mục đích như được đề cập bởi @ashitaka "Điều gì xảy ra nếu bạn sử dụng phương pháp Mobile First? Vì vậy, chúng tôi có CSS ​​di động trước và sau đó sử dụng chiều rộng tối thiểu để nhắm mục tiêu các trang web lớn hơn. Chúng ta không nên sử dụng từ khóa duy nhất trong bối cảnh đó, phải không? "

Muốn thêm vào đây, mục đích chỉ đơn giản là ngăn các trình duyệt không hỗ trợ sử dụng kiểu thiết bị khác đó như thể nó bắt đầu từ "màn hình" mà không có nó sẽ đưa nó ra màn hình trong đó nếu nó bắt đầu từ kiểu "chỉ" sẽ bị bỏ qua.

Trả lời cho ashitaka xem xét ví dụ này

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

Nếu chúng ta không sử dụng "chỉ" thì nó vẫn hoạt động vì kiểu máy tính để bàn cũng sẽ được sử dụng theo phong cách Android nổi bật nhưng với chi phí không cần thiết. Trong trường hợp này NẾU trình duyệt không hỗ trợ, trình duyệt sẽ chuyển sang Bảng kiểu thứ hai bỏ qua trang đầu tiên.

@media screen and (max-width:480px) { … } 

screenở đây là để đặt kích thước màn hình của truy vấn phương tiện. Ví dụ: chiều rộng tối đa của khu vực hiển thị là 480px. Vì vậy, nó chỉ định màn hình trái ngược với các loại phương tiện có sẵn khác.

@media only screen and (max-width: 480px;) { … } 

only screen ở đây được sử dụng để ngăn các trình duyệt cũ 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.