Zapytania o media

Zapytania o media są funkcją CSS które umożliwiają strona treści, aby dostosować się do różnych rozmiarów i rozdzielczości ekranu. Są podstawową częścią responsywny projekt strony i służą do dostosowywania wyglądu witryn internetowych do wielu urządzeń.

Zapytania o media mogą być wstawiane na stronie internetowej HTML lub zawarte w osobnym .CSS plik, do którego odwołuje się strona internetowa. Poniżej znajduje się przykład prostego zapytania o media:

@ media screen i (max-width: 768px)
{
nagłówek {wysokość: 70px; }
artykuł {rozmiar czcionki: 14px; }
img {max-width: 480px; }
}

Powyższe zapytanie o media aktywuje się, jeśli użytkownik przeglądarka okno to 768 pikseli szeroki lub mniejszy. Może się to zdarzyć, jeśli zmniejszysz okno na komputerze stacjonarnym lub jeśli używasz urządzenia mobilnego, takiego jak plik tabletka, aby wyświetlić stronę internetową.

W responsywnym projektowaniu witryn internetowych zapytania o media działają jak filtry dla różnych rozmiarów ekranu. Podobnie jak wszystkie moduły w kaskadowym arkuszu stylów, te, które pojawiają się niżej na liście, zastępują te nad nimi. Dlatego też domyślnym style są zwykle definiowane jako pierwsze w dokumencie CSS, po których następują zapytania o media dla różnych rozmiarów ekranu. Na przykład style pulpitu mogą być zdefiniowane jako pierwsze, następnie zapytanie o media ze stylami dla użytkowników tabletów, a następnie zapytanie o media przeznaczone dla smartphone użytkowników. Style mogą być również definiowane w odwrotnej kolejności, co jest uważane za rozwój „najpierw mobilny”.

Kompletujemy wszystkie dokumenty (wymagana jest kopia paszportu i 4 zdjęcia) potrzebne do min Szerokość jest zdecydowanie najpopularniejszą funkcją używaną w zapytaniach o media, dostępnych jest również wiele innych. Przykłady zawierają min-device-width, min-device-height, współczynnik proporcji, max-color-index, maksymalna rozdzielczość, orientacja, rozkład. rozkład value, na przykład, może służyć do wykrywania wyświetlaczy HiDPI (takich jak wyświetlacze Retina) i ładuj grafikę o wysokiej rozdzielczości zamiast standardowych obrazów.