Wprowadzenie do zapytań medialnych w CSS

Istnieje specjalna komenda @media, która pozwala wykonywać różny kod w zależności od szerokości ekranu.

W następnym przykładzie jakiś kod zadziała, jeśli szerokość ekranu wynosi od 300px do 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* jakiś kod */
}

W następnym przykładzie jakiś kod zadziała, jeśli szerokość ekranu jest większa niż 300px:

css@media (min-width: 300px) {
  /* jakiś kod */
}

W następnym przykładzie jakiś kod zadziała, jeśli szerokość ekranu jest mniejsza niż 1200px:

css@media (max-width: 1200px) {
  /* jakiś kod */
}

Napiszmy w naszym zapytaniu medialnym jakiś kod. Na przykład, przy określonych rozmiarach ekranu pokolorujmy akapity na czerwono:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

A teraz pokolorujmy akapity na różne kolory w zależności od szerokości ekranu:

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

Задание 1

Niech następujący kod zastosuje się na ekranie o szerokości od 0 do 800px:

cssp {
  font-size: 20px;
}

A następujący kod niech zastosuje się na ekranie o szerokości od 800px i więcej:

cssp {
  font-size: 30px;
}

Задание 2

Niech następujący kod zastosuje się na ekranie o szerokości od 0 do 500px:

cssp {
  font-size: 15px;
}

Następujący kod niech zastosuje się na ekranie o szerokości od 500px do 900px:

cssp {
  font-size: 20px;
}

Następujący kod niech zastosuje się na ekranie o szerokości od 900px i więcej:

cssp {
  font-size: 30px;
}