Kurs HTML

Łączenie warunków w Media Queries

W poprzedniej lekcji poznaliśmy podstawową składnię Media Queries. Często jednak potrzebujemy stworzyć bardziej złożone warunki, łącząc typy mediów z cechami lub wiele cech ze sobą. Do tego służą operatory logiczne: and, not, only oraz przecinek (,), który działa jak logiczne LUB.

Operator and

Operator and jest najczęściej używanym operatorem logicznym. Służy do łączenia typu medium z cechą medium lub do łączenia wielu cech medium. Wszystkie połączone warunki muszą być spełnione, aby całe zapytanie było prawdziwe (logiczne I).

Składnia:

@media [media-type] and (media-feature-1: value) and (media-feature-2: value) { ... }Kopiuj

Przykłady:

/* Tylko dla ekranów ORAZ gdy minimalna szerokość to 768px */
@media screen and (min-width: 768px) { 
  /* Style dla tabletów i większych ekranów */
}

/* Tylko dla ekranów ORAZ gdy minimalna szerokość to 768px ORAZ orientacja jest pozioma */
@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Style dla tabletów w poziomie i większych */
}

/* Można pominąć typ medium (domyślnie 'all') */
/* Gdy minimalna szerokość to 600px ORAZ maksymalna szerokość to 900px */
@media (min-width: 600px) and (max-width: 900px) {
  /* Style dla ekranów o szerokości między 600px a 900px włącznie */
}
Kopiuj

Przecinek (,) - Logiczne LUB

Przecinek działa jak operator logiczny LUB. Jeśli użyjesz przecinka do oddzielenia wielu zapytań o media, style zostaną zastosowane, jeśli **którekolwiek** z tych zapytań będzie prawdziwe.

Składnia:

@media (media-query-1), (media-query-2), [media-type] { ... }Kopiuj

Przykłady:

/* Gdy maksymalna szerokość to 600px LUB orientacja jest pionowa */
@media (max-width: 600px), (orientation: portrait) {
  /* Style dla małych ekranów LUB dowolnego ekranu w pionie */
  .sidebar {
    display: none; /* Ukryj sidebar */
  }
}

/* Dla drukarek LUB dla ekranów o minimalnej szerokości 1200px */
@media print, screen and (min-width: 1200px) {
  body {
    font-size: 14pt;
  }
}
Kopiuj

Każde zapytanie oddzielone przecinkiem jest traktowane niezależnie.

Operator not

Operator not neguje całe zapytanie o media. Style zostaną zastosowane, jeśli zapytanie jest **fałszywe**. Musi być umieszczony na samym początku zapytania i neguje całe zapytanie, a nie tylko pojedynczą cechę.

Składnia:

@media not [media-type] and (media-feature: value) { ... }Kopiuj

Przykład:

/* Stosuj, gdy NIE jest to drukarka */
@media not print {
  body {
    background-color: white;
  }
}

/* Stosuj, gdy NIE jest to ekran o minimalnej szerokości 600px */
/* (Czyli dla ekranów węższych niż 600px) */
@media not screen and (min-width: 600px) {
  .mobile-menu {
    display: block;
  }
}

/* Uwaga: 'not' neguje całe zapytanie. */
/* Poniższe NIE oznacza 'nie kolorowy' - jest niepoprawne dla cechy 'color' */
/* @media not (color) { ... } */ 
/* Poprawnie (dla urządzeń monochromatycznych): */
@media (monochrome) { ... } 
/* Lub (dla urządzeń nie monochromatycznych): */
@media not (monochrome) { ... }
Kopiuj

Operator not jest stosunkowo rzadziej używany niż and i przecinek.

Operator only

Operator only jest używany głównie w celu **ukrycia Media Queries przed starszymi przeglądarkami**, które nie rozpoznają zapytań o media z cechami (rozpoznają tylko typy mediów).

Jeśli starsza przeglądarka napotka @media only screen and (min-width: 600px), zignoruje całe zapytanie, ponieważ nie rozumie słowa kluczowego only. Nowoczesna przeglądarka zignoruje słowo only i poprawnie zinterpretuje resztę zapytania: screen and (min-width: 600px).

Składnia:

@media only [media-type] and (media-feature: value) { ... }Kopiuj

Przykład:

/* Starsze przeglądarki zignorują to zapytanie */
@media only screen and (min-width: 768px) {
  .container {
    width: 750px;
  }
}
Kopiuj

W dzisiejszych czasach użycie only jest **znacznie mniej potrzebne**, ponieważ praktycznie wszystkie używane przeglądarki obsługują Media Queries z cechami. Można go jednak nadal spotkać w starszych kodach lub użyć dla pewności, choć często jest pomijany.