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) {
...
}
css
media-queries
Fraser
źródło
źródło
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ą
@media
deklaracji 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:
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 :
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
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
@media
ze 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ń.
źródło
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:
Ale jeśli najpierw piszesz zapytania o media dla mniejszego urządzenia, byłoby to mniej więcej tak:
źródło