Introducere în media queries în CSS

Există o comandă specială @media, care permite executarea unui cod diferit în funcție de lățimea ecranului.

În următorul exemplu, un anumit cod se va executa dacă lățimea ecranului este de la 300px până la 1200px:

@media (min-width: 300px) and (max-width: 1200px) {
	/* un anumit cod */
}

În următorul exemplu, un anumit cod se va executa dacă lățimea ecranului este mai mare de 300px:

@media (min-width: 300px) {
	/* un anumit cod */
}

În următorul exemplu, un anumit cod se va executa dacă lățimea ecranului este mai mică de 1200px:

@media (max-width: 1200px) {
	/* un anumit cod */
}

Să scriem în media query-ul nostru ceva cod. De exemplu, pentru anumite dimensiuni ale ecranului, să colorăm paragrafele în roșu:

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

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

Acum să colorăm paragrafele în diferite culori în funcție de lățimea ecranului:

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

Fie că următorul cod se aplică pe un ecran cu lățimea de la 0 până la 800px:

p {
	font-size: 20px;
}

Iar următorul cod să se aplice pe un ecran cu lățimea de la 800px și mai mult:

p {
	font-size: 30px;
}

Fie că următorul cod se aplică pe un ecran cu lățimea de la 0 până la 500px:

p {
	font-size: 15px;
}

Următorul cod să se aplice pe un ecran cu lățimea de la 500px până la 900px:

p {
	font-size: 20px;
}

Următorul cod să se aplice pe un ecran cu lățimea de la 900px și mai mult:

p {
	font-size: 30px;
}