Podstawy Media Queries

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 65 z 76.

Zapytanie o media w CSS pozwala stronie internetowej dostosowywać się do różnych rozmiarów ekranów poprzez stosowanie stylów w zależności od szerokości, wysokości lub innych właściwości urządzenia.

Podstawowa składnia zapytań o media:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

warunek: Reguła, która uruchamia style (np. max-width: 600px).
selektor: Element lub elementy HTML, które mają być stylowane.

property: Właściwość CSS do ustawienia (np. width, font-size).
value: Wartość przypisana do właściwości, która zmienia się w zależności od warunku zapytania o media.

W zapytaniu o media typ warunek może zależeć od różnych czynników, takich jak rozmiar ekranu, rozdzielczość i inne. Do często spotykanych warunków należą:

max-width: Ogranicza style do ekranów o maksymalnej szerokości (np. max-width: 600px).
min-width: Stosuje style do ekranów o minimalnej szerokości (np. min-width: 768px).

max-height: Ogranicza style do ekranów o maksymalnej wysokości (np. max-height: 400px).
min-height: Stosuje style do ekranów o minimalnej wysokości (np. min-height: 500px).

Te warunki pomagają kontrolować wygląd witryny na różnych urządzeniach i w różnych orientacjach.

Przykład:

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

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Zmienia to kolor tła na lightblue, gdy szerokość ekranu wynosi 600px lub mniej. Dla ekranów o szerokości od 601px do 1024px kolor tła będzie lightgreen.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem <div>. Twoim zadaniem jest dodanie zapytań medialnych, aby strona była responsywna. Wykonaj poniższe kroki:

Dodaj zapytanie @media dla ekranów o maksymalnej szerokości 600px:
- Ustaw kolor tła elementu body na jasnoniebieski.
- Ustaw rozmiar czcionki nagłówka (<h1>) na 5vw (5% szerokości obszaru roboczego).
Dodaj zapytanie @media dla ekranów o minimalnej szerokości 601px i maksymalnej szerokości 1024px:
- Ustaw kolor tła elementu body na jasnozielony.
- Ustaw rozmiar czcionki nagłówka (<h1>) na 3vw (3% szerokości obszaru roboczego).

Zmień rozmiar okna przeglądarki, aby zobaczyć, jak zapytania medialne dynamicznie dostosowują układ.

Spróbuj swoich sił

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Wpisz tutaj swój kod-->
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>