Los media queries (@media) o consulta de medios en español sirven para modificar el aspecto de nuestra pagina web según el dispositivo y el tamaño del viewport que lo vea. Es lo que hace que una página pueda ser responsiva, cualidad fundamental en el desarrollo web actual. Su sintaxis es sencilla

@media tipoDeDispositivo operadorLogico (condición)

Un media query siempre se declara con el arroba al principio y la palabra media

Para que tipo de dispositivo aplica esta medida (opcional)

Operador logico soportado por media querias (and not u only)

Una condición que se debe cumplir para que el media query se active

A continuación vemos cada uno de los elementos por separado y tambien algunos ejemplos de los mismos

Media type (tipos de dispositivos)

Con los media types podemos definir comportamientos determinados para dispositivos determinados. Hay cuatro tipos de media types disponibles:

• all

Comportamiento por defecto. El media type se aplica a todos los dispositivos. Ej: quiero que en todos los dispositivos en los que el width sea menor a 500 px el fondo de una section sea burlywood.

@media all and (min-width:500px){
	.section{
		background-color:burlywood;
		}
}

• print

Sirve para crear condiciones que solo se verán en vistas previas de impresión o en impresiones en papel. Ej: quiero que al imprimir una imagen con la clase “logo” se vea mas a la derecha.

@media print{
	.logo{
		position:absolute;
		left:20px;
	}
}

• Screen

Sirve para destinar media queries unicamente a pantallas, estas pueden ser cualquier tipo (telefono, computadora, tablet, notebook, televisor, proyector) Ej: quiero que en todas las pantallas mayores a 1500px el box sizing de mi nav sea border-box

@media screen and (max-width:1500px){
	nav{
		box-sizing:border-box;
	}
}