Diseño de página web responsiva - Consultas de medios

¿Qué son las consultas de medios?

Las consultas de medios son una técnica CSS introducida en CSS3.

Únicamente cuando se cumplan ciertas condiciones, se utiliza @media Reglas para referirse a bloques de atributos CSS.

Ejemplo

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

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

Pruebe usted mismo

Agregar punto de ruptura

En una etapa anterior de este tutorial, creamos una página web que contiene filas y columnas, pero esta página web responsive no se veía bien en la pantalla pequeña.

Las consultas de medios pueden ayudarte. Podemos agregar un punto de ruptura donde algunas partes del diseño se comportarán de manera diferente en cada lado del punto de ruptura.


Computadora de escritorio

Móvil

Añadir un punto de ruptura en 768px usando consultas de medios:

Ejemplo

Cuando la pantalla (ventana del navegador) sea menor de 768px, el ancho de cada columna debe ser del 100%:

/* Para dispositivos de escritorio: */
.col-1 {ancho: 8.33%;}
.col-2 {ancho: 16.66%;}
.col-3 {ancho: 25%;}
.col-4 {ancho: 33.33%;}
.col-5 {ancho: 41.66%;}
.col-6 {ancho: 50%;}
.col-7 {ancho: 58.33%;}
.col-8 {ancho: 66.66%;}
.col-9 {ancho: 75%;}
.col-10 {ancho: 83.33%;}
.col-11 {ancho: 91.66%;}
.col-12 {ancho: 100%;}
@media only screen and (max-width: 768px) {
  /* Para móviles: */
  [class*="col-"] {
    ancho: 100%;
  }
}

Pruebe usted mismo

Diseño de primero móvil en todo momento

Primero móvil (Mobile First) se refiere a diseñar primero para dispositivos móviles antes de diseñar para computadoras de escritorio o cualquier otro dispositivo (lo que hará que la página se muestre más rápido en dispositivos más pequeños).

Esto significa que debemos hacer algunos mejoras en CSS.

Cuando el ancho sea menor de 768px, deberíamos modificar el diseño en lugar de cambiar el ancho. Hemos seguido así un diseño de "primero móvil":

Ejemplo

/* Para móviles: */
[class*="col-"] {
  ancho: 100%;
}
@media only screen and (min-width: 768px) {
  /* Para escritorio: */
  .col-1 {ancho: 8.33%;}
  .col-2 {ancho: 16.66%;}
  .col-3 {ancho: 25%;}
  .col-4 {ancho: 33.33%;}
  .col-5 {ancho: 41.66%;}
  .col-6 {ancho: 50%;}
  .col-7 {ancho: 58.33%;}
  .col-8 {ancho: 66.66%;}
  .col-9 {ancho: 75%;}
  .col-10 {ancho: 83.33%;}
  .col-11 {ancho: 91.66%;}
  .col-12 {ancho: 100%;}
}

Pruebe usted mismo

Otro punto de ruptura

Puede agregar tantos puntos de ruptura como desee.

También insertaremos un punto de ruptura entre la tableta y el móvil.


Computadora de escritorio

Tableta

Móvil

Por lo tanto, hemos agregado una consulta de medios (en 600 píxeles) y hemos agregado un grupo de nuevas clases para dispositivos con más de 600 píxeles (pero menos de 768 píxeles):

Ejemplo

Tenga en cuenta que las dos clases son casi idénticas, la única diferencia es el nombre (col- y col-s-):

/* Para móviles: */
[class*="col-"] {
  ancho: 100%;
}
@media only screen and (min-width: 600px) {
  /* Para tablets: */
  .col-s-1 {ancho: 8.33%;}
  .col-s-2 {ancho: 16.66%;}
  .col-s-3 {ancho: 25%;}
  .col-s-4 {ancho: 33.33%;}
  .col-s-5 {ancho: 41.66%;}
  .col-s-6 {ancho: 50%;}
  .col-s-7 {ancho: 58.33%;}
  .col-s-8 {ancho: 66.66%;}
  .col-s-9 {ancho: 75%;}
  .col-s-10 {ancho: 83.33%;}
  .col-s-11 {ancho: 91.66%;}
  .col-s-12 {ancho: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Para escritorio: */
  .col-1 {ancho: 8.33%;}
  .col-2 {ancho: 16.66%;}
  .col-3 {ancho: 25%;}
  .col-4 {ancho: 33.33%;}
  .col-5 {ancho: 41.66%;}
  .col-6 {ancho: 50%;}
  .col-7 {ancho: 58.33%;}
  .col-8 {ancho: 66.66%;}
  .col-9 {ancho: 75%;}
  .col-10 {ancho: 83.33%;}
  .col-11 {ancho: 91.66%;}
  .col-12 {ancho: 100%;}
}

Parece extraño tener dos conjuntos de clases idénticas, pero nos da la oportunidad de usar HTML para decidir qué ocurre con las columnas en cada punto de ruptura:

Ejemplo de HTML

Para computadoras de escritorio:

Las primeras y terceras partes cubrirán 3 columnas. La parte central cubrirá 6 columnas.

Para tablets:

La primera parte cubrirá 3 columnas, la segunda parte cubrirá 9 columnas, la tercera parte se mostrará debajo de las dos primeras partes y cubrirá 12 columnas:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Pruebe usted mismo

Puntos de quiebre típicos de dispositivos

Hay innumerables pantallas y dispositivos con diferentes alturas y anchos, por lo que es difícil crear puntos de quiebre precisos para cada dispositivo. Por simplicidad, puede apuntar a estos cinco grupos:

Ejemplo

/* Dispositivos de muy pequeño tamaño (teléfonos, 600px y menos) */
@media only screen and (max-width: 600px) {...} 
/* Dispositivos pequeños (tabletas en orientación vertical y grandes teléfonos, 600 píxeles y más) */
@media only screen and (min-width: 600px) {...} 
/* Dispositivos medianos (tabletas en orientación horizontal, 768 píxeles y más) */
@media only screen and (min-width: 768px) {...} 
/* Dispositivos grandes (portátiles y computadoras de escritorio, 992px y más) */
@media only screen and (min-width: 992px) {...} 
/* Dispositivos de gran tamaño (portátiles y computadoras de escritorio, 1200px y más) */
@media only screen and (min-width: 1200px) {...}

Pruebe usted mismo

Orientación: Retrato / Paisaje

Las consultas de medios también se pueden usar para cambiar la disposición de la página según la orientación del navegador.

Puede configurar un conjunto de propiedades CSS que solo se aplican cuando el ancho de la ventana del navegador es mayor que su altura, lo que se llama 'modo horizontal':

Ejemplo

Si la orientación es el modo horizontal (landscape mode), el fondo de la página web será de color azul claro:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Pruebe usted mismo

Ocultar elementos con una consulta de medios

Otra uso común de las consultas de medios es ocultar elementos en diferentes tamaños de pantalla:

Ejemplo

/* Si el tamaño de la pantalla es de 600 píxeles o menos, oculte este elemento */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Pruebe usted mismo

Modificar el tamaño de la fuente con una consulta de medios

También puede usar consultas de medios para cambiar el tamaño de la fuente de los elementos en diferentes tamaños de pantalla:

Ejemplo

/* Si el tamaño de la pantalla es de 601px o más, configure el font-size de <div> en 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Si el tamaño de la pantalla es de 600px o menor, configure el font-size del <div> en 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Pruebe usted mismo

Manual de referencia @media CSS

Para una descripción completa de todos los tipos de medios y características/expresiones, consulte Ver @media regla en el manual de referencia CSS.