Media Queries en CSS

¿Qué es una Media Query?

Media query es una técnica CSS introducida en CSS3.

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si se cumple una determinada condición.

Ejemplo

Si la ventana del navegador es de 600px o menor, el color de fondo será azul claro:

CSS

@media only screen and (max-width: 600px) {
  body {
    background-color: azul claro;
  }
}

Añadir un punto de interrupción

Anteriormente en este tutorial hicimos una página web con filas y columnas, y era responsiva, pero no se veía bien en una pantalla pequeña.

Las consultas de medios pueden ayudar con eso. Podemos añadir un punto de ruptura donde ciertas partes del diseño se comportarán de manera diferente a cada lado del punto de ruptura.

Ejemplo

Cuando la pantalla (ventana del navegador) se hace más pequeña que 768px, cada columna debe tener un ancho de 100%:

CSS

/*Para escritorio: */
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  /* Para teléfonos móviles: */
  [class*="col-"] {
    width: 100%;
  }
}