CSS-те медиасұранымдарға кіріспе

Экранның еніне байланысты әртүрлі кодты орындауға мүмкіндік беретін @media арнайы командасы бар.

Келесі мысалда экран ені 300px-тен 1200px-ке дейін болғанда белгілі бір код орындалады:

@media (min-width: 300px) and (max-width: 1200px) {
	/* белгілі бір код */
}

Келесі мысалда экран ені 300px-тен үлкен болғанда белгілі бір код орындалады:

@media (min-width: 300px) {
	/* белгілі бір код */
}

Келесі мысалда экран ені 1200px-тен кіші болғанда белгілі бір код орындалады:

@media (max-width: 1200px) {
	/* белгілі бір код */
}

Медиасұранымымызда қандай да бір код жазайық. Мысалы, экранның белгілі бір өлшемдерінде абзацтарды қызыл түске бояйық:

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

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

Енді экран еніне байланысты абзацтарды әртүрлі түстерге бояйық:

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

Келесі код 0-тен 800px-ке дейінгі экран енінде қолданылсын:

p {
	font-size: 20px;
}

Ал келесі код 800px және одан үлкен экран енінде қолданылсын:

p {
	font-size: 30px;
}

Келесі код 0-тен 500px-ке дейінгі экран енінде қолданылсын:

p {
	font-size: 15px;
}

Келесі код 500px-тен 900px-ке дейінгі экран енінде қолданылсын:

p {
	font-size: 20px;
}

Келесі код 900px және одан үлкен экран енінде қолданылсын:

p {
	font-size: 30px;
}