Zapytania o multimedia

Projektanci mogą dostosowywać swoje projekty do potrzeb użytkowników. Najlepszym przykładem jest format urządzenia użytkownika, jego szerokość, współczynnik proporcji i inne aspekty. Za pomocą zapytań o media projektanci mogą dostosowywać się do tych różnych formatów.

Zapytania o multimedia są inicjowane za pomocą słowa kluczowego @media (reguła @ w CSS) i mogą być używane w różnych celach.

Kierowanie na różne typy danych wyjściowych

Witryny są często wyświetlane na ekranach, ale CSS może być też używany do stylizowania witryn pod kątem innych wyjść. Możesz chcieć, aby strony internetowe wyglądały inaczej na ekranie, a inaczej po wydrukowaniu. Umożliwia to wysyłanie zapytań o typy multimediów.

W tym przykładzie kolor tła jest ustawiony na szary. Jeśli jednak strona jest drukowana, kolor tła powinien być przezroczysty. Pozwala to zaoszczędzić tusz drukarki użytkownika.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Możesz użyć reguły @media w arkuszu stylów w ten sposób lub utworzyć osobny arkusz stylów i użyć atrybutu media w elemencie link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Jeśli nie określisz żadnego typu mediów dla CSS, automatycznie otrzyma on wartość all. Te 2 bloki CSS są równoważne:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Te 2 wiersze kodu HTML są równoważne:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Warunki zapytania

Do typów multimediów możesz dodawać warunki. Są one nazywane zapytaniami o multimedia. Arkusz CSS jest stosowany tylko wtedy, gdy typ nośnika jest zgodny, a warunek jest spełniony. Te warunki są nazywane funkcjami multimedialnymi.

Składnia zapytań o multimedia:

@media type and (feature)

Jeśli style znajdują się w osobnym arkuszu stylów, możesz użyć zapytań o media w elemencie link:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Załóżmy, że chcesz zastosować różne style w zależności od tego, czy okno przeglądarki jest w trybie poziomym (szerokość widocznego obszaru jest większa niż jego wysokość) czy pionowym (wysokość widocznego obszaru jest większa niż jego szerokość). Możesz to sprawdzić za pomocą funkcji multimedialnej o nazwie orientation:

@media all and (orientation: landscape) {
   /* Styles for landscape mode. */
}

@media all and (orientation: portrait) {
   /* Styles for portrait mode. */
}

Jeśli wolisz mieć osobne arkusze stylów:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

W tym przypadku typ mediów to all. Jest to wartość domyślna, więc możesz ją pominąć:

@media (orientation: landscape) {
   /* Styles for landscape mode. */
}

@media (orientation: portrait) {
   /* Styles for portrait mode. */
}

lub użyć osobnych arkuszy stylów:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Używanie osobnych arkuszy stylów dla różnych typów mediów, np. print, może być w porządku, ale używanie osobnego arkusza stylów dla każdego zapytania o media prawdopodobnie nie jest dobrym pomysłem. Zamiast tego użyj reguł @ @media.

Dostosowywanie stylów do rozmiaru widocznego obszaru

W przypadku elastycznego projektowania stron jedną z najbardziej przydatnych funkcji multimediów są wymiary obszaru widocznego w przeglądarce. Aby zastosować style, gdy okno przeglądarki jest szersze niż określona szerokość, użyj min-width.

@media (min-width: 400px) {
  /* Styles for viewports wider than 400 pixels. */
}

Użyj funkcji multimedialnej max-width, aby zastosować style poniżej określonej szerokości:

@media (max-width: 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

To zapytanie o media można też zapisać za pomocą funkcji mediów width i operatora mniejszego lub równego.

@media (width <= 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

W zapytaniach o media możesz używać dowolnych jednostek długości CSS. Jeśli Twoje treści są oparte głównie na obrazach, piksele mogą być najlepszym rozwiązaniem. Jeśli Twoje treści są głównie tekstowe, prawdopodobnie lepiej jest użyć jednostki względnej opartej na rozmiarze tekstu, np. em lub ch:

@media (min-width: 25em) {
  /* Styles for viewports wider than 25em. */
}

Możesz też łączyć zapytania o media, aby zastosować więcej niż 1 warunek. Aby połączyć zapytania o media, użyj słowa and:

@media (min-width: 50em) and (max-width: 60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. /*
}

Można to też zapisać za pomocą składni zakresu.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

Wybieranie punktów podziału na podstawie treści

Punkt, w którym warunek funkcji multimedialnej staje się prawdziwy, nazywa się punktem przerwania. Najlepiej jest wybierać punkty przerwania na podstawie treści, a nie popularnych rozmiarów urządzeń, ponieważ mogą się one zmieniać w każdym cyklu wprowadzania nowych technologii.

W tym przykładzie 50em to punkt, w którym wiersze tekstu stają się zbyt długie. Dlatego tworzony jest punkt przerwania, aby interfejs był bardziej czytelny. Za pomocą właściwości column-count tekst jest od tego momentu dzielony na 2 kolumny.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Połączenia

Możesz używać zapytań multimedialnych opartych na wysokości widocznego obszaru, a nie tylko na jego szerokości. Może to być przydatne w przypadku optymalizacji treści interfejsu w części strony widocznej na ekranie. W poprzednim przykładzie, jeśli czytelnicy korzystają z szerokiego, ale krótkiego okna przeglądarki, muszą przewinąć w dół jedną kolumnę, a potem przewinąć z powrotem do góry, aby przejść do początku drugiej kolumny. Bezpieczniej będzie zastosować kolumny tylko wtedy, gdy widoczny obszar będzie wystarczająco szeroki i wysoki.

Możesz łączyć zapytania o media, aby style były stosowane tylko wtedy, gdy wszystkie warunki są spełnione. W tym przykładzie, aby zastosować style kolumn, obszar widoku musi mieć co najmniej 50em pikseli szerokości i 30em pikseli wysokości. Te punkty podziału zostały wybrane na podstawie ilości treści.

@media (min-width: 50em) and (min-height: 30em) {
  article {
    column-count: 2;
  }
}

Możesz też użyć słów kluczowych or i not, aby wyrazić bardziej złożone sytuacje, w których chcesz zastosować style. Logiczne rozumowanie w ich przypadku może być trudne, dlatego sprawdź, czy działają i wchodzą w interakcje zgodnie z oczekiwaniami.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

Te przykłady pokazują, jak za pomocą zapytań o media można dostosowywać projekty do formatu urządzenia użytkownika, ale to tylko niewielka część możliwości. Zapytania o media mogą wykraczać daleko poza szerokość i wysokość, uzyskując dostęp do preferencji użytkownika dotyczących funkcji ułatwień dostępu i kolorów motywu. Używanie zapytań o media do dostosowywania układu to świetny początek elastycznego projektowania stron, które wykorzystuje te i inne funkcje.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elastycznych zapytaniach o media.