Jaka jest różnica między screen
i only screen
w 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 screen
sam 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)
źródło
only
kluczowe ukryje arkuszy stylów ze starszych przeglądarek, zobacz odpowiedź przez @hybrid poniżej. Wyjaśnia to bardzo dobrze.media
atrybutulink
elementu.screen
takie, jak wymienione w innych typach mediów.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łowonot
kluczowe musi znajdować się na początku deklaracji. Na przykład: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:
Ponieważ nie ma takiego typu multimediów jak tylko, arkusz stylów jest ignorowany. Podobnie stara przeglądarka powinna interpretować
tak jak
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
i
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ż,
401px
a 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ć
only
wersjiw przeciwieństwie do
aby upewnić się, że nie jest to interpretowane jako
Byłby to dobry test dla kogoś, kto ma dostęp do laboratorium urządzeń.
źródło
Aby stylizować na wiele smartfonów z mniejszymi ekranami, możesz napisać:
Aby zablokować przeglądanie starszych arkuszy stylów przez iPhone'a lub telefon z Androidem, możesz napisać:
Przeczytaj ten artykuł, aby uzyskać więcej informacji http://webdesign.about.com/od/css3/a/css3-media-queries.htm
źródło
only
słowa kluczowego w tym kontekście, prawda?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
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.
źródło
screen
tutaj 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.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.źródło