CSS Media & Container Queries

Media Queries

Sintaxis

@media (min-width: 500px) //Más de 500
 
@media (min-width: 500px and max-width: 1000px) //Entre 500 y 100
 
@media (500px <= width) //500 o más
 
@media (500px < width < 1000) //Entre 500 y 100
 
@media (prefers-color-scheme: dark) //Aplica en modo oscuro
 
@media (prefers-reduced-motion: reduced) //Prefiere sin animaciones

Container Queries

Los container queries son media queries que se basan en el tamaño de un elemento en lugar del tamaño del viewport. Para ello hay que especificar sobre el tamaño de qué elemento nos vamos a basar.

Sintaxis

Supongamos que tenemos esta estructura

<div class="wrapper">
	<div class="card"></div>
</div>

Queremos añadir container queries a card. Para ello debemos especificar su contenedor, wrapper, como el elemento sobre cuyo tamaño nos vamos a vasar.

.wrapper {
	container: wrapper / inline-size //Shorthand
	container-type: inline-size //Aplicamos cambios según ancho
	container-type: size //Aplicamos cambios según ancho y alto
	container-name: wrapper //Le damos un nombre que usamos abajo
}
 
@container wrapper (500px < width) {
 
}