Jaka jest różnica między „ekranem” a „tylko ekranem” w zapytaniach o media?


486

Jaka jest różnica między screeni only screenw zapytaniami mediów?

<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" />

Dlaczego musimy korzystać only screen? Czy screensam w sobie nie zapewnia wystarczającej ilości informacji, aby można je było wyświetlić tylko na ekranie?

Widziałem wiele responsywnych stron internetowych korzystających z jednego z tych trzech różnych sposobów:

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

Odpowiedzi:


542

Podzielmy twoje przykłady jeden po drugim.

@media (max-width:632px)

Ten mówi o oknie max-widtho rozdzielczości 632px, że chcesz zastosować te style. Przy takim rozmiarze w większości przypadków mówisz o czymkolwiek mniejszym niż ekran pulpitu.

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

To mówi o urządzeniu z screenoknem max-widtho rozdzielczości 632px. Jest to prawie identyczne z powyższym, z tą różnicą, że określasz screenw przeciwieństwie do innych dostępnych typów nośników najczęściej występujący inny print.

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

Oto cytat prosto z W3C, aby to wyjaśnić.

Słowo kluczowe „tylko” może być również użyte do ukrycia arkuszy stylów przed starszymi klientami użytkownika. Programy klienckie muszą przetwarzać zapytania o media zaczynające się od „tylko”, tak jakby słowo kluczowe „tylko” nie było obecne.

Ponieważ nie ma takiego typu multimediów jak „tylko”, arkusz stylów powinien być ignorowany przez starsze przeglądarki.

Oto link do cytatu pokazanego w przykładzie 9 na tej stronie.

Mam nadzieję, że rzuci to nieco światła na zapytania mediów.

EDYTOWAĆ:

Koniecznie sprawdź @hybrids doskonałą odpowiedź na to, jak onlysłowo kluczowe jest naprawdę obsługiwane.


23
Dla każdego, kto szukał lepszego wyjaśnienia dlaczegoonly kluczowe ukryje arkuszy stylów ze starszych przeglądarek, zobacz odpowiedź przez @hybrid poniżej. Wyjaśnia to bardzo dobrze.
JMTyler

1
Odpowiedź hybrydy jest dobra, ale podoba mi się również ta odpowiedź, ponieważ dotyczy zapytań o media wewnątrz CSS, a nie tylko adresowania mediaatrybutu linkelementu.
chharvey

2
jakie urządzenie nie ma ekranu?
Kokodoko

3
@Kokodoko te, które nie potrzebują. Ale poważnie, drukarki i czytniki ekranu niekoniecznie mają ekrany. Plus wszystko inne obecnie lub w przyszłości, które nie są identyfikowane jako screentakie, jak wymienione w innych typach mediów.
Matthew Green

1
@Kokodoko CSS istnieje po to, aby stworzyć rozdzielenie obaw między treścią a prezentacją. Prezentacja obejmuje znacznie więcej niż tylko to, co można zobaczyć na ekranie. To ważne rozróżnienie, o którym należy pamiętać, niezależnie od tego, do czego możesz projektować.
Matthew Green

230

Poniższe dokumenty pochodzą z dokumentów Adobe .


Specyfikacja zapytań o media zawiera również słowo kluczowe only, które ma ukrywać zapytania o media ze starszych przeglądarek. Słowo notkluczowe musi znajdować się na początku deklaracji. Na przykład:

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

Przeglądarki, które nie rozpoznają zapytań o media, oczekują rozdzielonej przecinkami listy typów mediów, a specyfikacja mówi, że powinny one obcinać każdą wartość bezpośrednio przed pierwszym niealfanumerycznym znakiem, który nie jest łącznikiem. Tak więc stara przeglądarka powinna interpretować powyższy przykład w następujący sposób:

media="only"

Ponieważ nie ma takiego typu multimediów jak tylko, arkusz stylów jest ignorowany. Podobnie stara przeglądarka powinna interpretować

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

tak jak

media="screen"

Innymi słowy, powinien stosować reguły stylu do wszystkich urządzeń ekranowych, nawet jeśli nie wie, co oznaczają zapytania o media.

Niestety IE 6–8 nie wdrożył poprawnie specyfikacji.

Zamiast stosować style do wszystkich urządzeń ekranowych, całkowicie ignoruje arkusz stylów.

Mimo tego zachowania nadal zaleca się prefiksowanie zapytań o media tylko wtedy, gdy chcesz ukryć style przed innymi, mniej popularnymi przeglądarkami.


Tak, używając

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

i

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

będzie mieć taki sam efekt w IE6-8: oba zapobiegną użyciu tych stylów. Będą jednak nadal pobierane.

Ponadto w przeglądarkach obsługujących zapytania o media CSS3 obie wersje załadują style, jeśli szerokość rzutni jest większa niż, 401pxa typ multimediów to screen.

Nie jestem całkowicie pewien, które przeglądarki, które nie obsługują zapytań o media CSS3, będą potrzebować onlywersji

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

w przeciwieństwie do

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

aby upewnić się, że nie jest to interpretowane jako

media="screen"

Byłby to dobry test dla kogoś, kto ma dostęp do laboratorium urządzeń.


3
Jeśli więc mówimy o zapytaniach o media w plikach CSS, możemy porzucić „tylko”, ponieważ starsze przeglądarki nie rozumieją zapytań o media, prawda?
1234ru

Dobra, bardzo klarowna odpowiedź. Dzięki!
Alexander Suraphel

Udostępniony link był bardzo pomocny. Dzięki
Raphael

Z mojego doświadczenia wynika, że ​​„tylko” działa zgodnie z oczekiwaniami w systemie operacyjnym Symbian (stare telefony dotykowe Nokia). Często go używałem, ponieważ przeglądarka ta była naprawdę kiepska w obsłudze CSS3, ale nadal była w stanie poprawnie obsługiwać „tylko” i „min / max-width” w zapytaniach o media.
Peter Knut,

@PeterKnut Dlaczego w ogóle obsługujesz takie stare urządzenia? Naprawdę ciekawy.
Prometeusz

41

Aby stylizować na wiele smartfonów z mniejszymi ekranami, możesz napisać:

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

Aby zablokować przeglądanie starszych arkuszy stylów przez iPhone'a lub telefon z Androidem, możesz napisać:

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

Przeczytaj ten artykuł, aby uzyskać więcej informacji http://webdesign.about.com/od/css3/a/css3-media-queries.htm


3
Nadal nie jestem do końca jasne. Zaktualizowałem też moje pytanie. Czy możesz podać jakiś przykład?
Jitendra Vyas,

4
Co się stanie, jeśli zastosujesz podejście Mobile First? Mamy więc najpierw mobilny css, a następnie używamy min-width do kierowania na większe witryny. Nie powinniśmy używać onlysłowa kluczowego w tym kontekście, prawda?
Ashitaka,

Ta odpowiedź była łatwa do zrozumienia! :) Tylko po to, aby starsze wersje, takie jak IE 6 lub opera 5 lub 6, nie ładowały danych, które muszą być prezentowane na Androida lub Chrome 30 lub IE 10 .. Doskonała odpowiedź sandeep :) zasługuje na +1
Afzaal Ahmad Zeeshan,

16

Odpowiedź @hybrid jest dość pouczająca, z tym że nie wyjaśnia celu wspomnianego przez @ashitaka „A co, jeśli zastosujesz podejście Mobile First? Więc najpierw mamy mobilny CSS, a następnie używamy min-width do kierowania reklam na większe witryny. Nie powinniśmy używać jedynego słowa kluczowego w tym kontekście, prawda? ”

Chciałbym dodać tutaj, że celem jest po prostu zapobieganie używaniu przez przeglądarki nieobsługujące tego innego stylu urządzenia, tak jakby zaczynał się od „ekranu”, bez wzięcia go na ekran, gdzie tak, jakby zaczynał się od „tylko” stylu, zostanie zignorowany.

Odpowiadając na ashitaka, rozważ ten przykład

<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)" />

Jeśli nie użyjemy „tylko”, nadal będzie działać, ponieważ styl pulpitu będzie również używany w uderzających stylach Androida, ale z niepotrzebnym narzutem. W takim przypadku JEŻELI przeglądarka nie obsługuje, nastąpi powrót do drugiego arkusza stylów, ignorując pierwszy.


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

screentutaj jest ustawienie rozmiaru ekranu zapytania o media. Np. Maksymalna szerokość obszaru wyświetlania wynosi 480 pikseli. Określa ekran w przeciwieństwie do innych dostępnych typów mediów.

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

only screen tutaj służy do zapobiegania stosowaniu określonych stylów przez starsze przeglądarki, które nie obsługują zapytań o media z funkcjami mediów.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.