Chcę wyświetlić ten sam zestaw stylów CSS osobom drukującym stronę (media = drukowanie) i osobom przeglądającym telefon komórkowy. Czy istnieje sposób na łączenie zapytań o media CSS?Łączenie zapytań o media CSS
Coś
@media only print or @media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
oddzielić je przecinkiem:
@media only print, only screen and (max-device-width: 480px)
See the spec, w szczególności, w przykładzie VI (podkreślenie)
kilka zapytań materiałów mogą być połączone w listę zapytania nośnika. lista zapytań o media oddzielonych przecinkami. Jeśli jeden lub kilka zapytań o media na liście rozdzielanej przecinkami ma wartość true, cała lista jest prawdziwa, i poza tym fałsz. W składni zapytań o media, przecinek wyraża logiczny OR, podczas gdy słowo kluczowe "i" wyraża logiczne AND.
wątpię, że drugi only jest potrzebna, więc prawdopodobnie można zrobić:
@media only print, screen and (max-device-width: 480px)
Operator "jedyny" jest stosowany do zastosowania stylu tylko wtedy, gdy pasuje całe zapytanie, co jest przydatne, aby uniemożliwić starszym przeglądarkom stosowanie wybranych stylów. Więc po prostu użyj przecinka ... np .: jeśli chcesz zastosować styl, gdy urządzenie jest w trybie poziomym: @media (min-szerokość: 700px) i (orientacja: pozioma) {...} – Aruna
Od https://developer.mozilla.org/en/CSS/Media_queries
Można łączyć wiele zapytań o media w postaci listy rozdzielonych przecinkami; jeśli dowolne zapytanie o media na liście jest prawdziwe, zastosowany zostanie powiązany arkusz stylu . Jest to odpowiednik logicznej operacji "lub".
Trzeba tylko usunąć drugie @media i dodać kilka nawiasów.
Powiązane: http://stackoverflow.com/questions/7668301/is-it-possible-to-embed -media-zapytania-w-zapytaniach-media –