Zapytania o multimedia

Projektanci mogą dostosowywać swoje projekty do potrzeb użytkowników. Najprostszym przykładem jest format urządzenia użytkownika, szerokość, format urządzenia itd. Za pomocą zapytań o media projektanci mogą uwzględniać te różne formaty.

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

Kierowanie na różne typy danych wyjściowych

Witryny są często wyświetlane na ekranach, ale CSS można też używać do stylizacji witryn na potrzeby innych wyników. Możesz chcieć, aby strony internetowe wyglądały inaczej na ekranie, a jeszcze 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 ma być drukowana, kolor tła powinien być przezroczysty. Pozwala to zaoszczędzić atrament.

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

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

W arkuszu stylów możesz użyć reguły @media w takiej postaci: 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 typu mediów dla pliku CSS, automatycznie zostanie mu przypisana wartość all. Te 2 bloki kodu CSS są równoważne:

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

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

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

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

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

Warunki zapytania

Możesz dodawać warunki do typów multimediów. Są to zapytania o multimedia. Styl CSS jest stosowany tylko wtedy, gdy typ multimediów jest zgodny i warunek jest spełniony. Warunki te są nazywane funkcjami multimediów.

Składnia zapytań o multimedia:

@media type and (feature)

Zapytań o media możesz używać w elemencie link, jeśli style są w osobnej sekcji stylów:

<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ść). Do testowania tej funkcji mediów orientation możesz użyć:

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

A jeśli wolisz mieć oddzielne 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. Ponieważ jest to wartość domyślna, możesz ją pominąć:

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

Możesz też użyć osobnych arkuszy stylów:

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

Chociaż używanie osobnych arkuszy stylów do różnych typów mediów, np. print, może być w porządku, stosowanie osobnego arkusza stylów do 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 projektowania responsywnego jedną z najprzydatniejszych funkcji multimediów są wymiary widocznego obszaru w przeglądarce. Aby zastosować style, gdy okno przeglądarki jest szersze niż określona szerokość, użyj parametru min-width.

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

Aby zastosować style w przypadku elementów multimedialnych o szerokości mniejszej niż określona wartość, użyj funkcji max-width:

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

W zapytaniach o media możesz używać dowolnych jednostek długości w CSS. Jeśli Twoje treści opierają się głównie na obrazach, piksele mogą być najlepszym rozwiązaniem. Jeśli Twoje materiały zawierają głównie tekst, warto 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 multimedia, aby stosować więcej niż 1 warunek. Aby połączyć zapytania dotyczące multimediów, użyj słowa and:

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

Wybieranie punktów przełamania na podstawie treści

Punkt, w którym warunek funkcji mediów staje się prawdziwy, nazywa się punktem przerwania. Punkty przerwania najlepiej dobierać na podstawie treści, a nie popularnych rozmiarów urządzeń, ponieważ mogą się one zmieniać z każdym cyklem wprowadzania technologii.

W tym przykładzie 50em to punkt, w którym wiersze tekstu stają się niewygodne. Aby ułatwić czytelność interfejsu, tworzony jest punkt kontrolny. 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ń o multimedia na podstawie wysokości widocznego obszaru, a nie tylko szerokości. Może to być przydatne przy optymalizacji treści interfejsu w części strony widocznej na ekranie. W poprzednim przykładzie, jeśli czytelnicy korzystają z szerokie, ale krótkie okno przeglądarki, muszą przewinąć jedną kolumnę w dół, a potem w górę, aby dostać się do góry drugiej kolumny. Lepiej jest stosować kolumny tylko wtedy, gdy widoczny obszar jest wystarczająco szeroki i wysoki.

Możesz łączyć zapytania dotyczące multimediów, aby style były stosowane tylko wtedy, gdy wszystkie warunki są spełnione. Aby można było zastosować style kolumn, widok musi mieć co najmniej 50em szerokości i 60em wysokości. Punkty graniczne zostały wybrane na podstawie ilości treści.

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

Te przykłady pokazują, jak za pomocą zapytań o multimedia można dostosować projekt do formatu urządzenia użytkownika, ale to tylko wierzchołek góry lodowej. Zapytania o multimedia mogą wykraczać poza szerokość i wysokość, uzyskując dostęp do preferencji użytkownika dotyczących funkcji ułatwień dostępu i kolorystyki motywu. Korzystanie z zapytań o media do wprowadzania korekt układu to świetny początek tworzenia projektu elastycznego, który opiera się na tych i innych funkcjach.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat zapytań o media w urządzeniach mobilnych.