Inleiding tot Media-navrae in CSS

Daar is 'n spesiale bevel @media, wat toelaat dat verskillende kode uitgevoer word afhangende van die skermwydte.

In die volgende voorbeeld sal sekere kode aktiveer, as die skermwydte van 300px tot 1200px is:

@media (min-width: 300px) and (max-width: 1200px) {
	/* sekere kode */
}

In die volgende voorbeeld sal sekere kode aktiveer, as die skermwydte groter as 300px is:

@media (min-width: 300px) {
	/* sekere kode */
}

In die volgende voorbeeld sal sekere kode aktiveer, as die skermwydte kleiner as 1200px is:

@media (max-width: 1200px) {
	/* sekere kode */
}

Laat ons 'n bietjie kode in ons media-navraag skryf. Byvoorbeeld, by sekere skermgroottes kleur ons paragrawe rooi:

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

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

En nou laat ons paragrawe in verskillende kleure kleur afhangende van die skermwydte:

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

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 0 tot 800px:

p {
	font-size: 20px;
}

En laat die volgende kode toegepas word op 'n skerm met 'n wydte van 800px en meer:

p {
	font-size: 30px;
}

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 0 tot 500px:

p {
	font-size: 15px;
}

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 500px tot 900px:

p {
	font-size: 20px;
}

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 900px en meer:

p {
	font-size: 30px;
}