Introductie tot media queries in CSS

Er is een speciale opdracht @media, die het mogelijk maakt om verschillende code uit te voeren afhankelijk van de schermbreedte.

In het volgende voorbeeld wordt een stukje code uitgevoerd, als de schermbreedte van 300px tot 1200px is:

@media (min-width: 300px) and (max-width: 1200px) {
	/* een stukje code */
}

In het volgende voorbeeld wordt een stukje code uitgevoerd, als de schermbreedte groter is dan 300px:

@media (min-width: 300px) {
	/* een stukje code */
}

In het volgende voorbeeld wordt een stukje code uitgevoerd, als de schermbreedte kleiner is dan 1200px:

@media (max-width: 1200px) {
	/* een stukje code */
}

Laten we een stukje code in onze media query schrijven. Bijvoorbeeld, bij bepaalde afmetingen van het scherm kleuren we de alinea's rood:

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

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

Laten we nu de alinea's in verschillende kleuren kleuren afhankelijk van de schermbreedte:

@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 de volgende code van toepassing zijn op een scherm met een breedte van 0 tot 800px:

p {
	font-size: 20px;
}

En laat de volgende code van toepassing zijn op een scherm met een breedte van 800px en meer:

p {
	font-size: 30px;
}

Laat de volgende code van toepassing zijn op een scherm met een breedte van 0 tot 500px:

p {
	font-size: 15px;
}

Laat de volgende code van toepassing zijn op een scherm met een breedte van 500px tot 900px:

p {
	font-size: 20px;
}

Laat de volgende code van toepassing zijn op een scherm met een breedte van 900px en meer:

p {
	font-size: 30px;
}