Media Queries w CSS3

By /

CSS

Media queries w CSS3 to potężne narzędzie, które umożliwia twórcom stron internetowych stosowanie stylów w zależności od charakterystyk urządzenia, na którym strona jest wyświetlana, takich jak szerokość ekranu, wysokość, rozdzielczość czy orientacja (pionowa lub pozioma). Dzięki media queries, można tworzyć responsywne strony internetowe, które dostosowują się do różnych urządzeń, zapewniając optymalne doświadczenie użytkownika niezależnie od tego, czy korzysta on z telefonu, tabletu, laptopa, czy monitora o dużej rozdzielczości.

Podstawowe zastosowanie Media Queries:

Media queries pozwalają na zdefiniowanie reguł CSS, które zostaną zastosowane tylko wtedy, gdy spełnione są określone warunki. Na przykład, można zdefiniować styl, który będzie stosowany tylko na ekranach mniejszych niż 600 pikseli szerokości.

Przykład użycia Media Queries:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Media Queries w CSS3</title>
    <style>
        body {
            background-color: lightblue;
        }

        /* Media query dla ekranów mniejszych niż 600px */
        @media (max-width: 600px) {
            body {
                background-color: lightcoral;
            }
        }

        /* Media query dla orientacji poziomej */
        @media (orientation: landscape) {
            body {
                background-color: lightgreen;
            }
        }
    </style>
</head>
<body>
    <h1>Witaj w świecie Media Queries!</h1>
    <p>Zmień rozmiar okna przeglądarki lub obróć 
         urządzenie, aby zobaczyć efekt.</p>
</body>
</html>

W tym przykładzie, tło strony zmienia kolor na lightcoral, gdy szerokość ekranu jest mniejsza niż 600 pikseli, a na lightgreen, gdy urządzenie znajduje się w orientacji poziomej. Dzięki temu można łatwo dostosować wygląd strony do różnych warunków wyświetlania.

Kiedy stosować Media Queries:

  • Do tworzenia responsywnych układów strony, które dostosowują się do różnych rozmiarów ekranu.
  • Do modyfikowania rozmiaru tekstu, obrazów i innych elementów, aby zapewnić lepszą czytelność i użyteczność na mniejszych ekranach.
  • Do ukrywania lub wyświetlania różnych sekcji strony w zależności od rozmiaru ekranu lub orientacji urządzenia.

Podsumowanie:

Media queries są kluczowym elementem responsywnego web designu, umożliwiającym twórcom stron dostosowanie stylów do różnych warunków wyświetlania. Pozwalają na stworzenie jednej strony internetowej, która wygląda dobrze i jest funkcjonalna na szerokiej gamie urządzeń, co jest niezbędne w dzisiejszym zróżnicowanym środowisku technologicznym. Nauka i zastosowanie media queries w projektach internetowych znacząco poprawia dostępność i doświadczenie użytkownika.

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

Powiązane artykuły

Scroll to Top