Zapytania o multimedia

Projektanci mogą dostosowywać swoje projekty do potrzeb użytkowników. Najprostszym przykładem jest tutaj format urządzenia użytkownika. i jej szerokości, format obrazu urządzenia itd. Za pomocą zapytań o multimedia projektanci mogą odpowiadać na 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.

Kieruj 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ń dotyczących typów multimediów.

W tym przykładzie kolor tła jest szary. Jeśli jednak strona jest wydrukowana, 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 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 typu mediów dla pliku CSS, automatycznie zostanie mu przypisana wartość all. Te dwa bloki kodu CSS są równoważne:

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

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

Te 2 wiersze kodu HTML też są 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 tak zwane zapytania o media. CSS jest stosowany tylko wtedy, gdy typ mediów pasuje i gdy warunek jest spełniony. Te warunki nazywamy cechami mediów.

Składnia zapytań o media:

@media type and (feature)

Zapytania o media możesz używać w elemencie link, jeśli style znajdują się w osobnym arkuszu 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. Jest to wartość domyślna, więc możesz ją pominąć, jeśli chcesz:

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

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

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

Chociaż używanie oddzielnych arkuszy stylów dla różnych typów multimediów, takich jak print, może być dobre, Używanie osobnego arkusza stylów do każdego zapytania o multimedia nie jest prawdopodobnie dobrym pomysłem. Zamiast tego użyj reguł @media.

Dostosowywanie stylów do rozmiaru widocznego obszaru

Jedną z najbardziej przydatnych funkcji multimedialnych w przypadku projektowania responsywnego są wymiary widocznego obszaru przeglądarki. 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 o szerokości mniejszej niż określona wartość, użyj funkcji multimediów 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 treści to głównie tekst, prawdopodobnie lepiej 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 stosować więcej niż jeden warunek. Użyj słowa and, aby połączyć zapytania o media:

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

Wybierz punkty przerwania na podstawie treści

Punkt, w którym warunek funkcji multimediów staje się spełniony, jest nazywany punktem przerwania. Lepiej wybrać punkty przerwania na podstawie treści, a nie popularnych rozmiarów urządzeń, ponieważ zmieniają się one z każdym cyklem wprowadzania technologii.

W tym przykładzie 50em to punkt, w którym wiersze tekstu stają się niewygodne. Tworzony jest więc punkt przerwania, który zwiększa czytelność interfejsu. Od tego momentu tekst jest dzielony na 2 kolumny za pomocą właściwości column-count.

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

Połączenia

Możesz używać zapytań multimedialnych 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 o multimedia, aby style były stosowane tylko wtedy, gdy wszystkie warunki są spełnione. Aby można było zastosować style kolumn, widoczny obszar musi mieć co najmniej 50em szerokości i 60em wysokości. Te punkty przerwania zostały wybrane na podstawie ilości treści.

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

Przykłady te pokazują, jak za pomocą zapytań o multimedia można dostosowywać projekty do formatu urządzenia użytkownika. ale to tylko rzeczywista część możliwości. 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 sposób na rozpoczęcie tworzenia projektu elastycznego, który opiera się na tych i innych funkcjach.

Sprawdź swoją wiedzę

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