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ła CSS) i mogą być używane w różnych przypadkach.
Kieruj na różne typy danych wyjściowych
Strony często są wyświetlane na ekranach, ale CSS można też wykorzystać do stylizacji stron pod kątem innych elementów wyjściowych. Strony internetowe mogą wyglądać inaczej na ekranie, ale inaczej po wydrukowaniu. Umożliwia to wysyłanie zapytań dotyczących typów multimediów.
W tym przykładzie kolor tła jest ustawiony na szary. Jeśli jednak strona jest wydrukowana, kolor tła powinien być przezroczysty. Spowoduje to zapisanie tuszu do drukarki.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
Możesz w ten sposób użyć reguły @media w arkuszu stylów
lub utworzyć oddzielny 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 w usłudze porównywania cen,
otrzyma on automatycznie wartość typu mediów równą 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 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
Do typów multimediów możesz dodawać warunki. Są to tak zwane zapytania o media. CSS jest stosowany tylko wtedy, gdy typ mediów pasuje i gdy warunek jest spełniony. Warunki te są nazywane funkcjami multimedió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ść) lub w trybie pionowym
(wysokość widocznego obszaru jest większa niż jego szerokość).
Dostępna jest funkcja multimediów o nazwie orientation, której możesz użyć, aby sprawdzić, czy:
@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 na podstawie 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 opcji min-width.
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
Aby zastosować style poniżej określonej szerokości, 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 CSS.
Jeśli Twoje treści zawierają głównie obrazy, najlepiej użyj pikseli.
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ę niekomfortowo długie.
Tworzony jest więc punkt przerwania, który zwiększa czytelność interfejsu.
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 szerokiego, ale krótkiego okna przeglądarki, musi przewinąć jedną kolumnę, a potem z powrotem w górę i dotrzeć do góry drugiej kolumny. Bezpieczniej jest stosować kolumny tylko wtedy, gdy widoczny obszar jest wystarczająco szeroki i wystarczający.
Możesz łączyć zapytania o media, 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ść, dostęp do preferencji użytkownika dotyczących ułatwień dostępu i kolorów motywów. Używanie zapytań o multimedia do dostosowywania układu to świetny początek dla elastycznego projektowania stron, które opiera się na tych i innych funkcjach.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o elastycznych zapytaniach o multimedia.
Zapytania o multimedia istnieją tylko w odniesieniu do rozmiaru ekranu?
Ekrany są jedynym miejscem, w którym treści są oglądane lub wyświetlane?
Domyślny typ medió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.Co należy zrobić, aby zapobiec skalowaniu projektu na urządzeniu mobilnym przez przeglądarkę?
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 powyżej 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 media.