Media Queries

Media Queries w CSS3 to potężne narzędzie, które pozwala twórcom stron internetowych na dostosowanie wyglądu swoich stron do różnych rozmiarów ekranu i rodzajów urządzeń. Dzięki nim można tworzyć responsywne strony internetowe, które wyglądają świetnie zarówno na komputerach stacjonarnych, tabletach, jak i telefonach komórkowych. Media Queries pozwalają na stosowanie różnych stylów w zależności od wielu czynników, takich jak szerokość ekranu, wysokość, orientacja (pionowa lub pozioma) i rozdzielczość.

Przykład użycia Media Queries

Poniżej znajduje się przykład pokazujący, jak można używać Media Queries do zmiany stylów w zależności od szerokości ekranu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład Media Queries w CSS3</title>
    <style>
        /* Styl bazowy dla wszystkich urządzeń */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: lightgrey;
        }
        .box {
            width: 100%;
            padding: 20px;
            background-color: skyblue;
            color: white;
            text-align: center;
            margin-bottom: 20px;
        }

        /* Media query dla ekranów szerokości od 600px do 899px */
        @media (min-width: 600px) and (max-width: 899px) {
            .box {
                background-color: lightgreen;
                /* Zmienia kolor tła na zielony */
            }
        }

        /* Media query dla ekranów o szerokości 900px lub więcej */
        @media (min-width: 900px) {
            .box {
                background-color: tomato;
                /* Zmienia kolor tła na pomidorowy */
                color: black;
                /* Zmienia kolor tekstu na czarny */
            }
        }
    </style>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</body>
</html>

W tym przykładzie, wszystkie elementy z klasą .box domyślnie mają tło w kolorze niebieskim. Gdy szerokość ekranu znajduje się w przedziale od 600px do 899px, kolor tła zmienia się na zielony. Dla ekranów o szerokości 900px lub większej, kolor tła zmienia się na pomidorowy, a kolor tekstu na czarny. Dzięki temu możemy dostosować wygląd strony do różnych urządzeń, poprawiając jej czytelność i estetykę.

Możliwe wartości i właściwości

Media Queries pozwalają na stosowanie wielu różnych właściwości i wartości, takich jak:

  • min-width / max-width: minimalna lub maksymalna szerokość ekranu/okna, przy której mają być stosowane określone style.
  • min-height / max-height: minimalna lub maksymalna wysokość ekranu/okna.
  • orientation: orientacja urządzenia (landscape lub portrait).
  • resolution: rozdzielczość ekranu.

Każda z tych właściwości może być używana do finezyjnego dostosowania stylów strony do specyfikacji urządzenia użytkownika.

Podsumowanie

Media Queries w CSS3 to kluczowy element responsywnego projektowania stron internetowych. Pozwalają one na elastyczne dostosowywanie się do różnych warunków wyświetlania, co jest niezbędne w dzisiejszym zróżnicowanym środowisku technologicznym. Dzięki Media Queries, można zapewnić użytkownikom optymalne doświadczenia, niezależnie od tego, z jakim urządzeniem mają do czynienia.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top