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) {
  ...
}

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”.

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ń.

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 */
}