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:

@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:

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

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

@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:

@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:

@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;
	}
}

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

p {
	font-size: 20px;
}

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

p {
	font-size: 30px;
}

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

p {
	font-size: 15px;
}

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

p {
	font-size: 20px;
}

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

p {
	font-size: 30px;
}