Media queries

CSS Media Query ofrece una forma de aplicar CSS solo cuando el navegador y el entorno del dispositivo coinciden con una regla que se especifica.

Por ejemplo:

/* Aplica el estilo a pantallas más anchas que 480 píxeles */

@media screen and (min-width: 480px) {
  div {
    color: red;
  }
}

Las media queries son una parte clave del diseño web responsivo, ya que le permiten crear diferentes diseños según el tamaño de la pantalla, pero también se pueden usar para detectar otras cosas sobre el entorno en el que se ejecuta su sitio como, por ejemplo, si el el usuario está usando una pantalla táctil en lugar de un ratón.