Zapytania o media CSS: maksymalna szerokość LUB maksymalna wysokość

490

Czy podczas pisania zapytania o media CSS można określić wiele warunków za pomocą logiki „LUB”?

Próbuję zrobić coś takiego:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}
Fraser
źródło

Odpowiedzi:

938

Użyj przecinka, aby określić dwie (lub więcej) różne reguły:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

Od https://developer.mozilla.org/en/CSS/Media_queries/

... Ponadto możesz łączyć wiele zapytań o media na liście oddzielonej przecinkami; jeśli którekolwiek z zapytań o media na liście jest prawdziwe, stosowany jest powiązany arkusz stylów. Jest to odpowiednik operacji logicznej „lub”.

Fabrizio Calderan
źródło
3
@media screen i (max-width: 568px) i (max-height: 320px) {} - w moim przypadku działa to poprawnie
nosensus
5
@nosensus, przecinek oznacza relację OR, co oznacza, że ​​albo mogą być prawdziwe dla reguł, które mają zastosowanie, zgodnie z pierwotnym pytaniem. Wyświetlany kod dotyczy relacji ORAZ, w której oba muszą być prawdziwe, aby reguły miały zastosowanie.
Drew Noakes
Masz rację. „ORAZ” jest to reguła zarówno dla skali (wysokości, jak i szerokości), ponieważ w niektórych przypadkach potrzebujemy dokładnie takiej reguły. Ponieważ możesz mieć dwa urządzenia, na przykład 320 x 560 i 320 x 480, a rotacja urządzenia zepsuje cię, nadrobisz zaległości. Mam na myśli znaki „przecinek” i „AND” mają różne środki.
nosensus
265

Zapytania o media CSS i operatory logiczne: krótki przegląd;)

Szybka odpowiedź.

Oddziel reguły przecinkami: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Długa odpowiedź.

Tutaj jest dużo, ale starałem się, aby informacje były gęste, a nie tylko puszyste. To była dobra okazja, żeby się uczyć! Poświęć trochę czasu na systematyczne czytanie i mam nadzieję, że będzie to pomocne.


Zapytania o media

Zapytania o media są zasadniczo wykorzystywane w projektowaniu stron internetowych, aby tworzyć doświadczenia związane z urządzeniem lub sytuacją; odbywa się to za pomocą @mediadeklaracji w CSS strony . Można to wykorzystać do wyświetlania strony internetowej w różny sposób w różnych okolicznościach: niezależnie od tego, czy korzystasz z tabletu lub telewizora o różnych proporcjach obrazu, czy Twoje urządzenie ma kolorowy lub czarno-biały ekran, a może najczęściej użytkownik zmienia rozmiar swojej przeglądarki lub przełącza między urządzeniami do przeglądania o różnych rozmiarach ekranu (bardzo ogólnie rzecz biorąc, projektowanie tego typu nazywa się responsive web design )

Operatory logiczne

Przy projektowaniu dla tych sytuacji wydaje się, że istnieją cztery logiczne operatory , których można użyć, aby wymagać bardziej złożonych kombinacji wymagań podczas celowania w różne urządzenia lub rozmiary rzutni .

(Uwaga: jeśli nie rozumiesz różnic między regułami multimediów, zapytaniami o media i zapytaniami o funkcje, najpierw przejrzyj dolną część tej odpowiedzi, aby lepiej zapoznać się z terminologią związaną ze składnią zapytań o media

1. ORAZ ( i słowo kluczowe)

Wymaga spełnienia wszystkich określonych warunków, zanim zaczną obowiązywać reguły stylizacji.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Określone reguły stylizacji nie zostaną wprowadzone, chyba że wszystkie poniższe zostaną ocenione jako prawdziwe:

  • Typ mediów to „screen” i
  • Obszar wyświetlania ma co najmniej 700 pikseli szerokości i
  • Orientacja ekranu jest obecnie pozioma.

Uwaga: uważam, że te trzy kwerendy użyte razem składają się na jedno zapytanie multimedialne .

2. LUB ( listy oddzielone przecinkami )

Zamiast łańcucha kluczowego lub słowa kluczowego listy rozdzielane przecinkami są używane do łączenia wielu zapytań o media razem, tworząc bardziej złożoną regułę multimediów

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Określone reguły stylizacji zaczną obowiązywać, gdy dowolne zapytanie medialne zostanie ocenione jako prawdziwe :

  1. Typ nośnika to „ręczny” lub
  2. Obszar wyświetlania ma co najmniej 650 pikseli szerokości lub
  3. Orientacja ekranu jest obecnie pozioma.

3. NIE ( nie słowo kluczowe)

Nie słowa kluczowego może być wykorzystane do zanegowania pojedynczego zapytania mediów (a nie do pełnych mediów wyklucza --meaning że neguje tylko wpisy między zestawem przecinkami, a nie pełnych mediów rządzić po deklaracji @media).

Podobnie, uwaga , że nie słów kluczowych zapytań neguje mediów, to nie mogą być wykorzystane do zanegowania indywidualne zapytanie funkcji w zapytaniu mediów. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Określona tutaj stylizacja wejdzie w życie, jeśli

  1. Typ nośnika ORAZ min. Rozdzielczość nie spełniają ich wymagań (odpowiednio „screen” i „300dpi”) lub
  2. Rzutnia ma szerokość co najmniej 800 pikseli.

Innymi słowy, jeśli typ nośnika to „ekran”, a minimalna rozdzielczość to 300 dpi, reguła nie wejdzie w życie, chyba że minimalna szerokość rzutni wynosi co najmniej 800 pikseli.

(Nie-słowo kluczowe może być trochę funky w stwierdzeniu. Daj mi znać, jeśli dam radę lepiej;)

4. TYLKO ( tylko słowo kluczowe)

Jak rozumiem, jedynym słowem kluczowym jest zapobieganie błędnej interpretacji przez zapytania starszych zapytań o media jako o wcześniej używanym, węższym typie mediów. Przy prawidłowym użyciu starsze / niezgodne przeglądarki powinny po prostu całkowicie zignorować styl.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Uważam, że starsza / niezgodna przeglądarka po prostu zignoruje ten wiersz kodu, ponieważ odczyta jedyne słowo kluczowe i uzna go za niewłaściwy typ nośnika . (Zobacz tutaj i tutaj, aby uzyskać więcej informacji od mądrzejszych osób)

PO WIĘCEJ INFORMACJI

Aby uzyskać więcej informacji (w tym więcej funkcji, o które można zapytać), patrz: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators


Zrozumienie terminologii zapytań o media

Uwaga: Musiałem nauczyć się następującą terminologię za wszystko, żeby mieć sens, zwłaszcza w odniesieniu do nie słowa kluczowego. Oto, jak rozumiem:

Mediów reguła (MDN również wydaje się nazywają te wypowiedzi medialne) zawiera określenie @mediaze wszystkich jego kolejnych zapytań mediów

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Mediów zapytań jest zbiorem pytań fabularnych. Mogą być tak proste jak jedno zapytanie funkcji lub mogą użyć słowa kluczowego i, aby utworzyć bardziej złożone zapytanie. Zapytania o media można oddzielić przecinkami, aby utworzyć bardziej złożone reguły dotyczące mediów (patrz słowo kluczowe lub powyżej).

screen (Uwaga: tutaj używane jest tylko jedno zapytanie dotyczące funkcji).

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

NIE handheld, (min-width: 650px). (Uwaga przecinek: tutaj są dwa zapytania o media).

Cecha zapytanie jest najbardziej podstawowa część nośniku i po prostu zasada dotyczy danej funkcji oraz jej status w danej sytuacji przeglądania.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)


Fragmenty kodu i informacje pochodzące z:

Zapytania o media CSS od Mozilla Contributors (na licencji CC-BY-SA 2.5 ). Niektóre próbki kodu zostały użyte z niewielkimi zmianami, aby (miejmy nadzieję) zwiększyć przejrzystość wyjaśnień.

Arkusze Mateusza
źródło
3
Świetna odpowiedź, ale można ją ulepszyć dzięki przedmowie, która natychmiast zapewnia wymaganą odpowiedź („maksymalna szerokość LUB maksymalna wysokość”) tak zwięźle, jak to możliwe (patrz odpowiedź fcalderans). Następnie należy opracować skomplikowany kontekst pomocniczy. Wielu użytkowników oczekuje natychmiastowego rozwiązania bez konieczności inwestowania w szerszą krzywą uczenia się niż to konieczne. Jako użytkownik wolałbym znaleźć natychmiastową odpowiedź z opcją poszukiwania dodatkowego kontekstu, zamiast konieczności przeszukiwania dodatkowego kontekstu w celu znalezienia odpowiedzi. Niezależnie od tego, dobra praca i formatowanie.
Clarus Dignus
3
Chociaż jest to dobry napis, nie jestem pewien, czy konkretne pytanie jest dobrym miejscem dla całego elementu startowego Media Queries. Innymi słowy, pytanie jest tak szczegółowe, że nie oddaje tej odpowiedzi w sposób sprawiedliwy. Ponadto termin „funkcja zapytania” nie pojawia się w zapytaniach o media, pojawia się w innej specyfikacji CSS , a używanie go w kontekście zapytań o media jest mylące - ale powinienem powiedzieć o tym każdemu, kto zaczął używać tego terminu w Artykuł MDN w pierwszej kolejności. Prawidłowy termin z Media Queries 4 to „stan mediów”.
BoltClock
Powiedzmy, że muszę obsługiwać wszystkie urządzenia iPhone, więc powinienem pisać zapytania o media dla każdego urządzenia osobno, np. IPhone 5 (zarówno pionowy, jak i poziomy), iPhone6, iPhone 6 Plus itd. Jeśli tak, skończę pisać więcej zapytań o media obejmujące wszystkie rozmiar urządzeń. Mam rację?
IAmRkrishnaV21
2

Istnieją dwa sposoby pisania poprawnych zapytań o media w css. Jeśli najpierw piszesz zapytania o media na większym urządzeniu, poprawny sposób pisania to:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Ale jeśli najpierw piszesz zapytania o media dla mniejszego urządzenia, byłoby to mniej więcej tak:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}
Navneet Kumar
źródło