CSS @media

CSS @media

@media to reguła CSS używana do stosowania stylów tylko wtedy, gdy spełniony jest określony warunek dotyczący urządzenia lub okna przeglądarki. Jest podstawowym mechanizmem wykorzystywanym w RWD — Responsive Web Design.

Najczęściej @media służy do zmiany wyglądu strony w zależności od szerokości ekranu, np. dla telefonu, tabletu i komputera.

Składnia

@media (warunek) {
  selektor {
    właściwość: wartość;
  }
}

Przykład z max-width

body {
  font-size: 18px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

W tym przykładzie tekst będzie mniejszy na ekranach o szerokości 600 px lub mniej.

Przykład z min-width

.container {
  width: 100%;
}

@media (min-width: 1024px) {
  .container {
    width: 960px;
    margin: 0 auto;
  }
}

Ten styl zadziała dopiero na ekranach o szerokości 1024 px lub większej.

Najważniejsze zastosowania

• zmiana układu strony na małych ekranach,
• dostosowanie rozmiaru czcionek,
• ukrywanie lub pokazywanie elementów,
• zmiana liczby kolumn,
• dostosowanie menu do urządzeń mobilnych.

W egzaminie

Jeśli pytanie dotyczy różnych stylów dla różnych szerokości ekranu, poprawną odpowiedzią jest zwykle @media.