Projektanci mogą dostosowywać swoje projekty do potrzeb użytkowników. Najlepszym przykładem jest format urządzenia użytkownika: jego szerokość, format obrazu itp. 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 na przykład 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 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 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 zapytania o multimedia. Styl CSS jest stosowany tylko wtedy, gdy typ multimediów jest zgodny i warunek jest spełniony. Te warunki nazywamy cechami medió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.
}
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. 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, prawdopodobnie nie jest dobrym pomysłem stosowanie osobnego arkusza stylów do każdego zapytania o media. Zamiast tego użyj atrybutów at-rule @media.
Dostosowywanie stylów na podstawie rozmiaru widocznego obszaru
W przypadku elastycznego projektowania stron 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 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 treści są głównie tekstowe, 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 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. Najlepiej wybrać punkty przecięcia na podstawie treści, a nie popularnych rozmiarów urządzeń, ponieważ te mogą się zmieniać w każdym cyklu wprowadzania nowych 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.
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 w przypadku optymalizacji treści interfejsu „powyżej talii”. 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 30em wysokości.
Punkty graniczne zostały wybrane na podstawie ilości treści.
@media (min-width: 50em) and (min-height: 30em) {
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 kolorów 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.
Zapytania o multimedia istnieją tylko w przypadku rozmiaru ekranu?
Czy ekrany to jedyne miejsce, w którym treści internetowe są wyświetlane lub konsumowane?
Domyślny typ multimediów to:
screenscreen nie jest typem domyślnym.nonenone nie jest prawidłowym typem multimediów.allsomesome nie jest prawidłowym typem multimediów.landscapelandscape nie jest prawidłowym typem multimediów.Jak można zapobiec skalowaniu projektu w przeglądarce na urządzeniach mobilnych?
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">Które zapytanie o multimedia ma zastosowanie, gdy okno przeglądarki jest większe niż 720px.
@media (width: 720px)720px.@media (max-width: 720px)720px.@media (min-width: 720px)720px.@media (clamp-width: 720px)clamp-width nie jest prawidłowym warunkiem funkcji zapytania o multimedia.