Kurs HTML

Wprowadzenie do Cech Mediów (Media Features)

Cechy mediów (Media Features) to konkretne właściwości urządzenia, przeglądarki lub środowiska użytkownika, które możemy sprawdzać w Media Queries, aby warunkowo stosować style CSS. Stanowią one serce RWD, pozwalając na precyzyjne dostosowanie wyglądu strony.

W tej lekcji skupimy się na najważniejszych i najczęściej używanych cechach: width, height, orientation i resolution.

Szerokość Viewportu: width, min-width, max-width

Jest to zdecydowanie najczęściej używana cecha w RWD. Odnosi się do szerokości **obszaru wyświetlania (viewportu)** przeglądarki.

• width: Sprawdza **dokładną** szerokość viewportu. Rzadziej używane w RWD niż wersje min/max, ponieważ trudno trafić w dokładną szerokość.
• min-width: Sprawdza, czy szerokość viewportu jest **równa lub większa** od podanej wartości. Idealne dla podejścia Mobile First (dodawanie stylów dla większych ekranów).
• max-width: Sprawdza, czy szerokość viewportu jest **równa lub mniejsza** od podanej wartości. Idealne dla podejścia Desktop First (upraszczanie stylów dla mniejszych ekranów).

Przykład (Mobile First):

/* Style podstawowe (dla małych ekranów) */
.container { width: 100%; }
.sidebar { display: none; }

/* Style dla tabletów i większych (>= 768px) */
@media screen and (min-width: 768px) {
  .container { display: flex; }
  .sidebar { display: block; width: 200px; }
  .content { flex: 1; }
}

/* Style dla dużych ekranów (>= 1200px) */
@media screen and (min-width: 1200px) {
  .container { max-width: 1140px; margin: 0 auto; }
}

Przykład (Desktop First):

/* Style podstawowe (dla dużych ekranów) */
.container { max-width: 1140px; margin: 0 auto; display: flex; }
.sidebar { display: block; width: 200px; }
.content { flex: 1; }

/* Style dla tabletów i mniejszych (<= 1199px) */
@media screen and (max-width: 1199px) {
  .container { max-width: 960px; }
}

/* Style dla telefonów (<= 767px) */
@media screen and (max-width: 767px) {
  .container { display: block; width: 100%; }
  .sidebar { display: none; }
}

Wysokość Viewportu: height, min-height, max-height

Analogiczne do cech szerokości, ale odnoszą się do wysokości viewportu. Są używane rzadziej niż cechy szerokości, ale mogą być przydatne w specyficznych sytuacjach, np. do dostosowania elementów zajmujących całą wysokość ekranu lub reagowania na małą wysokość (np. pozioma orientacja telefonu).

• height: Dokładna wysokość viewportu.
• min-height: Minimalna wysokość viewportu.
• max-height: Maksymalna wysokość viewportu.

Przykład:

/* Ukryj duży baner na bardzo niskich ekranach */
@media screen and (max-height: 400px) {
  .large-hero-banner {
    display: none;
  }
}

Orientacja Urządzenia: orientation

Ta cecha pozwala wykryć, czy urządzenie jest trzymane w orientacji pionowej czy poziomej.

• orientation: portrait: Wysokość viewportu jest większa lub równa jego szerokości (orientacja pionowa).
• orientation: landscape: Szerokość viewportu jest większa niż jego wysokość (orientacja pozioma).

Przykład:

/* Zmień układ na dwukolumnowy tylko w orientacji poziomej */
@media screen and (orientation: landscape) {
  .article-content {
    column-count: 2;
    column-gap: 20px;
  }
}

/* Zwiększ rozmiar przycisków w orientacji pionowej na małych ekranach */
@media screen and (max-width: 600px) and (orientation: portrait) {
  .button {
    padding: 15px 25px;
    font-size: 1.1em;
  }
}

Uwaga: Poleganie wyłącznie na orientation może być mylące, ponieważ np. wąskie, ale wysokie okno przeglądarki na desktopie również będzie miało orientację portrait. Często lepiej jest łączyć orientation z warunkami dotyczącymi szerokości lub wysokości.

Rozdzielczość Ekranu: resolution, min-resolution, max-resolution

Ta cecha pozwala dostosować style w zależności od gęstości pikseli ekranu (rozdzielczości). Jest to przydatne np. do serwowania obrazów o wyższej rozdzielczości dla ekranów Retina/HiDPI.

Wartością jest liczba pikseli na jednostkę, najczęściej używane jednostki to:

• dpi (dots per inch): Punkty na cal.
• dpcm (dots per centimeter): Punkty na centymetr.
• dppx (dots per pixel unit): Punkty na jednostkę piksela CSS (1dppx = 96dpi). Jest to często preferowana jednostka w kontekście webowym.

Przykład:

/* Style dla standardowych ekranów */
.logo {
  background-image: url('logo-1x.png');
}

/* Style dla ekranów o wysokiej rozdzielczości (np. Retina) */
/* Warunek: co najmniej 192dpi (co odpowiada 2dppx) */
@media screen and (min-resolution: 192dpi), 
       screen and (min-resolution: 2dppx) {
  .logo {
    /* Podmień na obrazek 2x większy */
    background-image: url('logo-2x.png');
    background-size: contain; /* Aby zachować oryginalny rozmiar w CSS */
  }
}

Użycie min-resolution (lub max-resolution) pozwala na zastosowanie stylów dla ekranów o określonej minimalnej (lub maksymalnej) gęstości pikseli.