What is Media query?

Media query to technologia stosowana w projektowaniu stron internetowych, która pozwala na dostosowanie wyglądu i układu strony w zależności od parametrów urządzenia użytkownika, takich jak rozdzielczość ekranu, orientacja, czy typ urządzenia. Dzięki media query, twórcy stron mogą tworzyć responsywne witryny, które wyglądają dobrze zarówno na komputerach stacjonarnych, jak i na urządzeniach mobilnych.

Jak działają media queries?

Media queries sprawdzają właściwości urządzenia i na tej podstawie stosują odpowiednie reguły CSS. Na przykład, można zdefiniować różne style dla ekranów o szerokości mniejszej niż 768 pikseli, dzięki czemu strona wyświetla się prawidłowo na urządzeniach mobilnych. Funkcjonalność ta jest szczególnie ważna przy tworzeniu sklepów internetowych, które muszą być intuicyjne i czytelne na różnych platformach. Oto przykład kodu CSS z użyciem media query:

        
        @media (max-width: 768px) {
            body {
                background-color: lightblue;
            }
        }
        
    

W powyższym przykładzie, jeśli szerokość ekranu jest mniejsza niż 768 pikseli, tło strony zmieni się na jasnoniebieskie. Media query pozwala na tworzenie bardziej elastycznych i dostępnych stron internetowych – to kluczowe narzędzie w arsenale każdego web developera. Responsywne strony są lepiej oceniane przez wyszukiwarki, co może poprawić pozycjonowanie strony i przyciągnąć więcej odwiedzających. Dobrze zaprojektowana strona internetowa, która działa płynnie na różnych urządzeniach, może zwiększyć zaufanie klientów i poprawić wyniki sprzedaży.