Podsumowanie wszystkich sposobów reagowania na urządzenia dzięki funkcjom multimedialnym ustawieniach.
Projektowanie elastyczne nie byłoby możliwe bez zapytań o multimedia. Przed rozpoczęciem korzystania z zapytań o multimedia nie było wiadomo, z jakiego urządzenia użytkownicy korzystali do odwiedzania Twojej witryny. Projektanci musieli przyjąć pewne założenia. Założenia te zostały zakodowane w projektach o stałej szerokości lub płynnych układach.
Wszystko to zmieniło się wraz z wprowadzeniem zapytań o media. Po raz pierwszy projektanci mogli spotykać ludzi z drugiej strony. Projektanci mogą dostosowywać układ do urządzeń użytkowników.
Pamiętaj, że zapytanie o multimedia obejmuje opcjonalny typ mediów i obowiązkową funkcję multimediów. W ostatnich latach niewiele się zmieniło w rodzajach multimediów. Nadal możliwe są tylko 4 wartości:
@media all
@media screen
@media print
@media speech
Z kolei funkcje multimedialne zostały znacznie rozszerzone. Projektanci mogą teraz docierać do użytkowników nawet w połowie drogi, dostosowując swoje projekty tak, aby pasowały nie tylko do rozmiaru ekranu.
Wymiary widocznego obszaru
Zdecydowanie najpopularniejsze w internecie zapytania o multimedia to zapytania dotyczące szerokości widocznego obszaru. Jednak nawet tutaj masz do wyboru. Możesz skorzystać z funkcji multimediów max-width
, aby zastosować style poniżej określonej szerokości, lub z funkcji multimediów min-width
, aby zastosować style powyżej określonej szerokości.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Lubię korzystać z usługi min-width
. Stosuję style układu w sposób addytywny. Wprowadzam nowe reguły układu w każdym punkcie przerwania zamiast wycofywać poprzednie.
Ta metoda dodawania działa również w przypadku wysokości. Korzystając z elementu min-height
, możesz wprowadzać więcej reguł w miarę zwiększania wysokości widocznego obszaru. Możesz na przykład mieć element nagłówka, który chcesz zakotwiczyć u góry okna przeglądarki, jeśli jest wystarczająco dużo miejsca w pionie.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Jeśli wolisz, możesz jednak skorzystać z funkcji multimediów max-height
. W tym przypadku nagłówek jest domyślnie zakotwiczony, ale jeśli nie będzie wystarczającej ilości miejsca w pionie, przyklejenie zostanie usunięte.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
Wybór prefiksów (min-
–max-
) nie dotyczy tylko width
i height
. Taki sam wybór ma funkcja multimediów aspect-ratio
. Jeśli chcesz stosować style z zachowaniem dokładnego stosunku szerokości do wysokości, ta opcja udostępnia też wersję bez prefiksu.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Zapewnienie różnych stylów dla różnych formatów obrazu może szybko przestać działać. Jeśli nie potrzebujesz tak szczegółowej kontroli, funkcja multimediów orientation
może lepiej spełnić Twoje potrzeby. Może on mieć 2 wartości: portrait
lub landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Mimo że terminy „orientacja pionowa” i „poziomy” są najczęściej używane do określania orientacji urządzeń mobilnych, a funkcja multimediów orientation
nie jest ograniczona do konkretnych urządzeń. Pełnoekranowe okno przeglądarki na typowym laptopie ma orientation
o wartości landscape
.
ekrany,
Różne wyświetlacze mają różną gęstość pikseli mierzoną w dpi
, czyli liczbę kropek na cal. Możesz dostosować style do różnej gęstości pikseli za pomocą funkcji multimediów resolution
. Podobnie jak aspect-ratio
, słowo resolution
ma 3 rodzaje: minimalną, maksymalną i ścisłą.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Możliwe, że nie musisz używać żadnych zapytań o media w usłudze resolution
. Gęstość pikseli dotyczy zazwyczaj tylko obrazów, a obrazy elastyczne pozwalają radzić sobie z gęstością pikseli bezpośrednio w kodzie HTML.
Z kolei CSS określa animacje i przejścia. Możesz dostosować te animacje i przejścia, aby dostosować je do różnych częstotliwości odświeżania za pomocą funkcji multimediów update
. Ta funkcja multimediów zgłasza jedną z 3 wartości: none
, slow
i fast
.
Wartość none
update
oznacza, że nie ma częstotliwości odświeżania. Nie można na przykład zaktualizować wydrukowanej strony.
Wartość slow
parametru update
oznacza, że wyświetlacz nie może się szybko odświeżyć. Wyświetlacz e-ink to przykład ekranu z wolną częstotliwością odświeżania.
Wartość fast
parametru update
oznacza, że ekran odświeża się wystarczająco szybko, by obsłużyć animacje i przejścia.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Nie wszystkie aspekty wyświetlacza są związane z możliwościami sprzętowymi. W module dotyczącym motywów omówiliśmy, jak definiować właściwości w pliku manifestu aplikacji internetowej. Jedna z nich nazywa się display
i możesz nadać jej wartość fullscreen
, standalone
, minimum-ui
lub browser
. Odpowiednia funkcja multimediów display-mode
umożliwia dostosowanie stylów do tych różnych opcji.
Załóżmy, że w pliku manifestu aplikacji internetowej podano wartość standalone
(display
). Jeśli ktoś doda Twoją witrynę do ekranu głównego, otworzy się ona bez interfejsu przeglądarki. Możesz dla tych użytkowników wyświetlać przycisk Wstecz.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Kolor
Istnieje wiele funkcji multimedialnych, dzięki którym można wysyłać zapytania o możliwości kolorystyczne urządzenia. Jeśli chcesz dostosować style do dowolnego wyświetlacza, który wyświetla tylko odcienie szarości, możesz użyć funkcji multimediów monochrome
bez żadnej wartości.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Istnieje odpowiednia funkcja multimediów color
.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
W przypadku ekranów kolorowych możesz tworzyć zapytania za pomocą funkcji multimediów color-gamut
, color-index
lub dynamic-range
. Wszystkie zawierają szczegółowe informacje na temat możliwości kolorystycznych ekranu.
W tym przykładzie wartości kolorów są aktualizowane w odpowiedzi na funkcję multimediów dynamic-range
, która zgłasza kombinację maksymalnej jasności, głębi kolorów i współczynnika kontrastu wyświetlacza. Możliwe wartości to standard
lub high
. Ekran o wysokiej rozdzielczości, który zgłasza wartość dynamic-range
o wartości high
, otrzymuje inną przestrzeń kolorów za pomocą nowej funkcji CSS color()
.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Interakcja
Funkcje multimedialne mogą też informować o rodzaju mechanizmu wprowadzania danych używanego do interakcji z witryną: hover
, any-hover
, pointer
i any-pointer
. Więcej informacji znajdziesz w module dotyczącym interakcji.
Ustawienia
Istnieje wiele zapytań o multimedia, które umożliwiają dostosowywanie się do preferencji użytkownika: prefers-color-scheme
, prefers-contrast
i prefers-reduced-motion
. Więcej informacji znajdziesz w modułach dotyczących motywów i ułatwień dostępu.
Możesz połączyć funkcje multimedialne w jednym zapytaniu o media. Możesz określić zakres stylów animacji, aby były one stosowane tylko wtedy, gdy urządzenie ma dużą częstotliwość odświeżania, a użytkownik nie wyraził zainteresowania zmniejszonym ruchem.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Więcej funkcji multimedialnych
Planujemy dodać więcej funkcji multimedialnych.
Funkcje multimedialne forced-colors
i inverted-colors
informują, czy urządzenie używa palety kolorów ograniczonej czy odwróconej.
Funkcja multimediów scripting
umożliwia dostosowywanie CSS na podstawie dostępności JavaScriptu.
Funkcja multimediów o nazwie prefers-reduced-data
pozwala użytkownikom wskazać, że korzystają z połączenia z pomiarem użycia danych, co pozwala przesłać mniejsze lub mniejsze zasoby.
Pozostałe propozycje są nadal opracowywane. W następnym i ostatnim module poznasz ofertę pakietową funkcji multimediów, która obsługuje różne konfiguracje ekranu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o funkcjach multimedialnych
Zapytanie o multimedia może wyszukać urządzenie o określonej szerokości, np. @media (width: 1024px)
?
Zapytanie o multimedia może wyszukać urządzenie w określonym aspect-ratio
, takim jak @media (aspect-ratio: 4/3)
?
Które zapytania o multimedia w kolorach są prawidłowe?
@media (color-gamut: srgb)
@media (monochrome)
@media (color)
@media (dynamic-range: high)
@media (min-color-index: 15000)
Które z tych zapytań o multimedia związane z ustawieniami użytkownika są prawidłowe?
@media (prefers-contrast: more)
@media (prefers-reduced-motion: reduce)
@media (prefers-site-speed: fast)
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)