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

Question

Sự khác biệt giữa "màn hình" và "màn hình duy nhất" trong truy vấn phương tiện 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 tôi phải sử dụng 'Chỉ'. Không screen không tự cung cấp đủ thông tin để chỉ hiển thị cho Màn hình?

Tôi đã xem nhiều trang web đáp ứng. Một số sử dụng

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

Một số

@media (max-width:632px) 

và một số

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

Answer 1

Để tạo kiểu cho nhiều điện thoại thông minh với 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ũ nhìn thấy một chiếc iPhone hoặc Android điện thoại style sheet, 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.htm

Answer 2

Hãy phá vỡ ví dụ một bạn một.

@media (max-width:632px) 

Điều này đang nói đến cửa sổ với max-width của 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) 

Cái này đang nói cho một thiết bị với một screen và một cửa sổ với max-width của 632px áp dụng phong cách. Điều này gần như giống hệt như trên, ngoại trừ bạn đang chỉ định screen như trái ngược với other available media types phổ biến nhất là print khác.

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

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

Từ khóa ‘only’ cũng có thể được sử dụng để ẩn trang tính từ các tác nhân người dùng cũ hơn. Tác nhân người dùng phải xử lý truy vấn phương tiện bắt đầu bằng ‘only’ như thể từ khóa ‘only’ không có mặt.

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

Đây là link to that quote được hiển thị trong ví dụ 9 trên trang đó.

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

EDIT:

Hãy chắc chắn để kiểm tra @hybrids excellent answer về cách từ khóa only thực sự xử lý.

Answer 3

Sau đây là từ Adobe docs.

---

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

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

trình duyệt không nhận ra phương tiện truyền thông truy vấn mong đợi một danh sách bằng dấu phẩy của các loại phương tiện truyền thông, và các đặc điểm kỹ thuật nói rằng họ nên cắt mỗi giá trị ngay lập tức trước khi nhân vật nonalphanumeric đầu tiên mà không phải là một dấu nối. Vì vậy, một trình duyệt cũ nên giải thích các ví dụ trên như thế này:

media="only" 

Bởi vì không có phương tiện truyền thông như kiểu như chỉ, stylesheet được bỏ qua. Tương tự như vậy, một trình duyệt cũ nên giải thích

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

như

media="screen" 

Nói cách khác, cần áp dụng các quy tắc phong cách cho tất cả các thiết bị màn hình, mặc dù nó không biết những gì các truy vấn phương tiện truyền thông nghĩa là.

Thật không may, IE 6-8 không thể triển khai chính xác đặc điểm kỹ thuật.

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

Bất chấp hành vi này, bạn vẫn nên sử dụng tiền tố truy vấn phương tiện chỉ khi bạn muốn ẩn kiểu 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 chặn những phong cách từ đang được sử dụng. Tuy nhiên, họ 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 401px và loại phương tiện là màn hình.

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

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

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

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

để chắc chắn rằng nó không mang ý nghĩa

media="screen" 

Đây sẽ là một thử nghiệm tốt cho ai đó có quyền truy cập vào quảng cáo evice lab.

Answer 4

Trả lời bởi @hybrid là khá nhiều thông tin, ngoại trừ tôi không giải thích mục đích đượ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 đầu tiên và sau đó sử dụng chiều rộng tối thiểu để Chúng tôi không nên sử dụng từ khóa duy nhất trong ngữ cảnh đó, phải không? "

Bạn muốn thêm vào đây là mục đí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ẽ mang nó cho màn hình như thể nó bắt đầu từ" chỉ "phong cách sẽ được bỏ qua.

Answering để 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ỉ" nó sẽ vẫn làm việc như kiểu máy tính để bàn cũng sẽ được sử dụng nổi bật phong cách android nhưng với chi phí không cần thiết. Trong trường hợp này NẾU một trình duyệt không hỗ trợ, nó sẽ dự phòng cho tờ Style thứ hai bỏ qua đầu tiên.