Capítulo 8. Diseño Responsivo

8.1 MOBILE FIRST

El primer principio del diseño responsive es el mobile first. Como se mencionó, esto significa exactamente lo que parece: usted crea su diseño móvil antes de construir el escritorio. Esta es la mejor manera de asegurarse de que ambas versiones funcionen.

Desarrollar para dispositivos móviles es un ejercicio de limitaciones. El espacio de la pantalla es limitado. La red suele ser más lenta. El usuario de un dispositivo móvil utiliza un conjunto diferente de controles interactivos. Escribir es posible, pero engorroso. El usuario no puede pasar el cursor sobre los elementos para activar efectos. Si comienza diseñando un sitio web interactivo completo y luego intenta reducirlo para cumplir con estas limitaciones, a menudo fracasará.

En cambio, el enfoque mobile first dicta que diseñe su sitio con estas limitaciones en mente desde el principio. Una vez que su experiencia móvil funcione (o al menos esté planificada), puede utilizar la "mejora progresiva" para aumentar la experiencia de los usuarios de pantallas grandes.

La Figura 8.1 muestra la página que va a crear. Lo adivinaste, ese es el diseño móvil.

Esta página tiene tres componentes principales: un header, la imagen principal con un poco de texto superpuesto y el contenido principal. También puede mostrar un menú oculto tocando o haciendo clic en el icono en la parte superior derecha (figura 8.2). Este ícono, con tres líneas horizontales, a menudo se llama ícono de hamburger porque se parece a los bollos y la hamburguesa de una hamburguesa.

Un diseño móvil es principalmente un diseño sencillo. Aparte del menú interactivo, este diseño está muy centrado en el contenido. En pantallas más grandes, puede permitirse dedicar mucho espacio a cosas como el header, la imagen principal y el menú. Pero en los dispositivos móviles, los usuarios suelen estar más orientados a las tareas. Es posible que salgan con sus amigos y quieran encontrar rápidamente el horario de la tienda u otra información específica, como un precio o una dirección.

Un diseño móvil tiene que ver con el contenido. Considere un diseño de escritorio que tiene un artículo en un lado y una barra lateral en el otro, donde la barra lateral tiene enlaces y elementos menos importantes. Deberá asegurarse de que el artículo aparezca primero en el diseño del dispositivo móvil. Esto significa que querrá que el contenido más importante aparezca primero en el HTML. Convenientemente, esto coincide con las preocupaciones de accesibilidad: un lector de pantalla accede directamente a las "cosas buenas", o un usuario que navega a través del teclado llega a los enlaces del artículo antes que a los de la barra lateral.

Dicho esto, esta no siempre es una regla estricta y rápida. Probablemente podrías argumentar que tu imagen principal no es tan importante como el contenido que se encuentra debajo. Pero es una parte sorprendente del diseño; entonces, en este caso, creo que vale la pena tener esa imagen cerca de la parte superior de la página. También contiene poco contenido, por lo que se necesita un esfuerzo mínimo para navegar más allá de él.

Al escribir el HTML para un diseño responsive, es importante asegurarse de que tenga todo lo que necesita para cada tamaño de pantalla. Puede aplicar CSS diferente para cada instancia, pero todas deben compartir el mismo HTML.

Ahora, consideremos nuestro diseño para ventanas gráficas más grandes. Primero codificará el diseño para dispositivos móviles, pero tener en cuenta su diseño general lo ayudará a guiar sus decisiones mientras lo hace. Para este ejercicio, agregará un breakpoint mediano y grande. La figura 8.3 muestra el diseño del medio.

Breakpoint: es un punto particular en el que los estilos de página cambian para proporcionar el mejor diseño posible para el tamaño de la pantalla.

Con este tamaño de ventana gráfica, tiene un poco más de espacio para trabajar. El encabezado y la imagen pueden permitirse más padding. Los elementos del menú pueden caber uno al lado del otro en una línea, por lo que ya no es necesario ocultarlos y el icono de la hamburguesa desaparece porque no lo necesita para abrir el menú. Ahora el contenido principal se puede organizar en tres columnas de igual ancho. La mayoría de los elementos se llenan hasta 1me de los lados de la ventana gráfica.

La ventana gráfica más grande será la misma, pero aumentará los márgenes a los lados de la página y hará que la imagen principal sea aún más grande. Este diseño se muestra en la figura 8.4.

Debido a que primero creará el diseño mobile first, es importante tener una idea de cómo se verán las ventanas gráficas más grandes, ya que eso puede influir en la estructura del HTML. Cree una nueva página web y hoja de estilo. Vincule la hoja de estilo y agregue la lista 8.1 al <body> del HTML.

          
<header id="header" class="page-header">
  <div class="title">
    <h1>Wombat Coffee Roasters</h1>
    <div class="slogan">We love coffee</div>
  </div>
</header>

<nav class="menu" id="main-menu">
  <button class="menu-toggle" id="toggle-menu">             1
    toggle menu
  </button>
  <div class="menu-dropdown">                               2
    <ul class="nav-menu">
      <li><a href="/about.html">About</a></li>
      <li><a href="/shop.html">Shop</a></li>
      <li><a href="/menu.html">Menu</a></li>
      <li><a href="/brew.html">Brew</a></li>
    </ul>
  </div>
</nav>

<aside id="hero" class="hero">
  Welcome to Wombat Coffee Roasters! We are
  passionate about our craft, striving to bring you
  the best hand-crafted coffee in the city.
</aside>

<main id="main">
  <div class="row">                                         3
    <section class="column">                                3
      <h2 class="subtitle">Single-origin</h2>
      <p>We have built partnerships with small farms
        around the world to hand-select beans at the
        peak of season. We then carefully roast in
        <a href="/batch-size.html">small batches</a>
        to maximize their potential.</p>
    </section>
    <section class="column">                                3
      <h2 class="subtitle">Blends</h2>
      <p>Our tasters have put together a selection of
        carefully balanced blends. Our famous
        <a href="/house-blend.html">house blend</a>
        is available year round.</p>
    </section>
    <section class="column">                                3
      <h2 class="subtitle">Brewing Equipment</h2>
      <p>We offer our favorite kettles, French
        presses, and pour-over cones. Come to one of
        our <a href="/classes.html">brewing
        classes</a> to learn how to brew the perfect
        pour-over cup.</p>
    </section>
  </div>
</main>
          
          Listado 8.1. Marcado de página para un diseño receptivo
        

1. Agrega el botón de hamburguesa para un menú móvil
2. Menú principal que estará oculto por defecto en dispositivos móviles
3. Agrega filas y columnas para ventanas gráficas medianas y grandes

En este marcado, el botón para alternar el menú para pantallas móviles está dentro del elemento de navegación. El nav-menu se coloca donde puede satisfacer sus necesidades para diseños móviles y de escritorio. Y las clases de row y column están en su lugar para permitir el diseño de escritorio. (Es posible que no sepa todo esto desde el principio, lo cual está bien).

Comencemos a diseñar la página. Primero, agregará algunos de los estilos más simples, como la fuente, los títulos y los colores, como se muestra en la figura 8.5. Debido a que en este momento nos preocupan los estilos de dispositivos móviles, cambie el tamaño de su navegador a un tamaño más estrecho para imitar un dispositivo móvil. Esto ayuda a mostrarle cómo se verá la página en una pantalla pequeña.

Estos estilos se dan en el listado 8.2. Agréguelos a su hoja de estilo para establecer el tamaño del border-box, la fuente y los colores de los enlaces. La lista agrega el tamaño de fuente responsive basado en la ventana gráfica que aprendió en el capítulo 2 6#40;sección 2.4.1). Luego, define estilos para el encabezado y el cuerpo principal de la página.

          
:root {
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);                  1
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

a:link {
  color: #1476b8;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #1430b8;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: #b81414;
}

.page-header {                                   2
  padding: 0.4em 1em;
  background-color: #fff;
}

.title > h1 {                                    2
  color: #333;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0.2em 0;
}

.slogan {                                        2
  color: #888;
  font-size: 0.875em;
  margin: 0;
}

.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans.jpg);       3
  background-size: 100%;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.3em #000;           4
}

main {                                          5
  padding: 1em;
}

.subtitle {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  font-size: 0.875rem;
  text-transform: uppercase;
}
          
          Listado 8.2. Agregar estilos iniciales para la página
        

1. El tamaño de fuente base se escala ligeramente con la ventana gráfica.
2. Encabezado y título de la página
3. Agrega la imagen principal a la página
4. Una sombra de texto oscura ayuda a que el texto claro siga siendo legible frente a un fondo complejo.
5. Contenido principal

Estos estilos son en su mayoría sencillos. Transforman el título de la página y los subtítulos en el cuerpo a mayúsculas. Añaden algunos márgenes y relleno, y ajustan los tamaños de fuente para los distintos componentes de la página.

La propiedad text-shadow en la imagen principal puede ser nueva para ti. Consiste en varios valores que juntos definen una sombra para agregar detrás del texto. Los dos primeros valores son coordenadas cartesianas, que indican qué tan lejos debe desplazarse la sombra de la posición del texto. Los valores 0.1em 0.1em desplazan la sombra ligeramente hacia la derecha y hacia abajo. El tercer valor (0.3em) indica cuánto difuminar la sombra. Finalmente, #000 define el color de la sombra.

8.1.1. Creando un menú móvil

En este punto, te quedas con la parte más complicada de la página: el menú. Construyamos eso ahora. Cuando haya terminado, se verá como la figura 8.6.

Escribir código en cualquier idioma es a menudo un proceso iterativo y CSS no es diferente. Para esta página, el menú tomó una cuidadosa consideración. Originalmente intenté colocar el <nav> dentro del <header> porque ahí es donde quería que apareciera el botón de hamburguesa. Pero después de comenzar con CSS, me di cuenta de que debería mantener los dos elementos como hermanos porque esto les permite apilarse naturalmente en el diseño del escritorio. A veces se necesitan algunas pasadas sobre ciertas partes del HTML para hacerlo bien.

Funcionalmente, este menú es muy parecido al menú desplegable que creó en el último capítulo (listado 7.6). Inicialmente, ocultará el menu-dropdown. Luego, en lugar de usar un efecto de hover, agregará algunas funciones de JavaScript adecuadas. Cuando el usuario hace clic (o toca) el menu-toggle, aparecerá el menú desplegable. Al hacer clic por segunda vez, se oculta el menú.

Los lectores de pantalla utilizan ciertos elementos HTML5 como <form>, <main>, <nav> y <aside> como puntos de referencia. Esto ayuda a los usuarios con problemas de visión a navegar rápidamente por la página. Es importante que coloque el botón para revelar su menú dentro de <nav> para que sea rápidamente visible cuando el usuario navegue allí. De lo contrario, el usuario saltaría al <nava> solo para encontrarlo vacío (el lector de pantalla ignora el menú desplegable cuando se aplica display: none).

Los menús de hamburguesas se han vuelto populares en los últimos años. Pueden resolver el problema de colocar más en una pantalla pequeña, pero tienen un costo. Se ha demostrado que ocultar elementos importantes (como el menú de navegación principal) reduce la interacción del usuario con esos elementos.

Estas son consideraciones que deberá evaluar con su equipo o diseñador. A veces son la elección correcta; otras veces, puede que no lo sean. Independientemente, es importante conocer las técnicas involucradas en la creación de un menú de hamburguesas.

En el listado 8.1, observe que el <nav> aparece después del <header> como un elemento hermano. Esto significa que fluirá hacia el espacio debajo del encabezado. Tendrá que hacer una cosa inusual aquí para que coincida con el diseño: usará el posicionamiento absoluto para tirar del botón de menu-toggle hacia arriba para que aparezca dentro del elemento del encabezado. Agregue este listado a su hoja de estilo para diseñar el menú.

          
.menu {
  position: relative;                    1
}

.menu-toggle {
  position: absolute;
  top: -1.2em;                           2
  right: 0.1em;

  border: 0;                             3
  background-color: transparent;

  font-size: 3em;
  width: 1em;
  height: 1em;
  line-height: 0.4;
  text-indent: 5em;                      4
  white-space: nowrap;
  overflow: hidden;
}
.menu-toggle::after {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  display: block;
  content: "\2261";                      5
  text-indent: 0;
}

.menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
}

.menu.is-open .menu-dropdown {
  display: block;                       6
}
          
          Listado 8.3. Estilos de menú para móviles
        

1. Establece un bloque de contención para ambos niños en posición absoluta
2. Una parte superior negativa tira del botón hacia arriba fuera de su bloque contenedor.
3. Anula los estilos de los botones del agente de usuario
4. Oculta el contenido de texto del botón y fija su tamaño en 1em
5. Superpone el botón con un símbolo Unicode, el icono de hamburguesa
6. Muestra el menú desplegable cuando la clase está abierta se agrega al menú

Están sucediendo muchas cosas aquí, pero se trata principalmente de una serie de técnicas que ya ha visto. El menú está relativamente posicionado para establecer un bloque contenedor para sus dos elementos secundarios: el botón de alternancia y el menú desplegable. El botón de alternancia se tira hacia arriba con una parte superior negativa, y la propiedad derecha lo coloca en el lado derecho de la pantalla. Esto hace que aparezca en el encabezado a la derecha del título de la página.

Luego, usa un truco de reemplazo en el botón: un ancho restringido, una sangría de texto grande y un desbordamiento oculto funcionan juntos para ocultar el texto del botón (toggle menu). Luego le da al pseudo-elemento ::after del botón un carácter Unicode (\2261) para su contenido. Este carácter es un símbolo matemático con tres líneas horizontales: un menú de hamburguesa. Si desea personalizar aún más el icono, puede usar una imagen de fondo en el pseudoelemento.

Si no está seguro de por qué se utiliza alguno de estos estilos en particular, coméntelos y observe el efecto que tienen en la página. La página se verá un poco divertida en una ventana gráfica grande; cambie el tamaño de la ventana de su navegador a un tamaño más estrecho para una mejor aproximación del aspecto móvil.

La clase is-open es un nuevo "truco". Cuando esta clase está presente, el selector final (.menu.is-open .menu-dropdown) apunta al menú desplegable. Cuando esta clase está ausente, el selector no lo hará. Esto habilita la funcionalidad del menú desplegable. La Figura 8.7 muestra el menú desplegable antes de que se aplique el resto del estilo (observe los cuatro enlaces frente a la imagen principal de la izquierda).

El JavaScript en el listado 8.4 agrega y elimina la clase is-open cuando se presiona el botón de alternancia. Agréguelo a su página antes de la etiqueta de cierre <body>.

          
<script type="text/javascript">
(function () {
  var button = document.getElementById('toggle-menu');
  button.addEventListener('click', function(event) {         1
    event.preventDefault();
    var menu = document.getElementById('main-menu');
    menu.classList.toggle('is-open');                        2
  });
})();
</script>
          
          Listado 8.4. JavaScript para la funcionalidad desplegable
        

1. Click-event listener (también se activa en un evento de toque de pantalla táctil)
2. 2 Alterna la clase is-open en el menú

Ahora, cuando haga clic en el icono de la hamburguesa, debería abrir el menú desplegable. Puede ver el texto del menú delante del contenido detrás de él. Vuelva a hacer clic en la hamburguesa para cerrarla. De esta forma, el CSS hará el trabajo de mostrar y ocultar los elementos correctos; JavaScript solo necesita cambiar el nombre de una clase.

Ahora que el menú desplegable funciona, el nav-menu necesita algo de estilo. Agregue este listado a su hoja de estilo.

          
.nav-menu {
  margin: 0;
  padding-left: 0;
  border: 1px solid #ccc;
  list-style: none;
  background-color: #000;
  color: #fff;
}

.nav-menu > li + li {              1
  border-top: 1px solid #ccc;
}

.nav-menu > li > a {
  display: block;
  padding: 0.8em 1em;              2
  color: #fff;
  font-weight: normal;
}
          
          Listado 8.5. Aplicar estilo al menú de navegación
        

1. Aplica un borde entre cada elemento del menú
2. Utiliza una buena cantidad de acolchado para garantizar una gran área en la que se puede hacer clic

Una vez más, esto no es nada nuevo. Como el menú es una lista (<ul>), anula el relleno izquierdo del agente de usuario y elimina las viñetas de la lista. El combinador de hermanos adyacente apunta a todos los elementos del menú excepto al primero, agregando un borde entre cada elemento.

Una cosa importante a tener en cuenta aquí es el relleno en los enlaces de los elementos del menú. Está diseñando para dispositivos móviles, que normalmente son pantallas táctiles. Las áreas clave en las que se puede hacer clic deben ser grandes y fáciles de tocar con un dedo.

Al diseñar para dispositivos móviles con pantalla táctil, asegúrese de que todos los elementos de acción clave sean lo suficientemente grandes como para tocarlos fácilmente con un dedo. No haga que sus usuarios se acerquen para tocar con precisión un botón o enlace diminuto.

8.1.2. Agregar la metaetiqueta de la ventana gráfica

En esta etapa, el diseño de su dispositivo móvil está completo, pero falta un detalle importante: la metaetiqueta de la ventana gráfica. Se trata de una etiqueta HTML que le indica a los dispositivos móviles que diseñó intencionalmente para pantallas pequeñas. Sin él, un navegador móvil asume que su página no responde e intentará emular un navegador de escritorio. Todo su arduo trabajo en un diseño móvil será en vano. No queremos eso. Actualice el <head> de su HTML para incluir la metaetiqueta como se muestra en la siguiente lista.

          
<head>
  <meta charset="UTF-8">
  <meta name="viewport"                                1
    content="width=device-width, initial-scale=1">     1
  <title>Wombat Coffee Roasters</title>
  <link href="styles.css" />
</head>
          
          Listado 8.6. Agregar la metaetiqueta de la ventana gráfica para la capacidad de respuesta móvil
        

1. 1 metaetiqueta de ventana gráfica

El atributo de contenido de la metaetiqueta indica dos cosas. Primero, le dice al navegador que use el ancho del dispositivo como el ancho asumido al interpretar el CSS, en lugar de pretender ser un navegador de escritorio de tamaño completo. En segundo lugar, utiliza initial-scale para establecer el nivel de zoom al 100% cuando se carga la página.

Las DevTools en los navegadores modernos brindan la capacidad de emular un navegador móvil, incluido un tamaño de ventana gráfica más pequeño y el comportamiento de la metaetiqueta de la ventana gráfica. Estas son herramientas útiles para probar su diseño receptivo. Para obtener más información sobre estos modos, consulte https://developers.google.com/web/tools/chrome-devtools/device-mode/ (Chrome) o https://developer.mozilla.org/en-US/docs/ Herramientas / Responsive_Design_Mode (Firefox).

Hay otras opciones disponibles, pero lo más probable es que las configuraciones aquí sean las que desee. Por ejemplo, puede establecer explícitamente width=320 para que el navegador asuma un ancho de ventana de 320 píxeles. Sin embargo, esto generalmente no es preferible, ya que los dispositivos móviles vienen en una amplia gama de tamaños. El uso del device-widht permite que el contenido se procese en el tamaño más apropiado.

Una tercera opción común que muchos desarrolladores agregan al atributo de content es user-scalable=no, que prohíbe al usuario usar dos dedos para acercar y alejar la imagen en su dispositivo móvil. Incluir esto es generalmente una mala práctica y desaconsejo su uso. Si un enlace es demasiado pequeño para tocarlo, o el usuario quiere ver más de cerca una imagen, esta configuración evitaría que usen el zoom para ayudar.

Para obtener más información sobre la etiqueta meta viewport, consulte la documentación de MDN en https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.

8.2 MEDIA QUERIES

El segundo componente del diseño responsive es el uso de media queries. Las media queries le permiten escribir un conjunto de estilos que solo se aplican a la página bajo ciertas condiciones. Esto le permite adaptar sus estilos de manera diferente, según el tamaño de la pantalla. Puede definir un conjunto de estilos que se apliquen a dispositivos pequeños, otro conjunto para dispositivos de tamaño mediano y, además, un tercer conjunto para pantallas grandes para permitir la disposición de partes de la página de manera diferente.

Media queries utilizan la regla @media para apuntar a dispositivos que coinciden con una función específica. Una media querie básica se ve así:

          
@media (min-width: 560px) {
  .title > h1 {
    font-size: 2.25rem;
  }
}
          
        

Cualquier conjunto de reglas se puede definir dentro del conjunto exterior de llaves. La regla @media es una verificación condicional que debe ser verdadera para que cualquiera de estos estilos se aplique a la página. En este caso, el navegador busca un min-width: 560px. El relleno solo se aplicará a un elemento de page-header si el dispositivo del usuario tiene un ancho de ventana de visualización de 560px o más. Si la ventana gráfica es menor que esto, se ignoran las reglas internas.

Las reglas dentro de una media querie aún siguen las reglas normales de la cascada. Pueden anular reglas fuera de la media querie (según la especificidad del selector o el orden de origen), o pueden anularse por esas reglas. La media querie en sí no afecta la especificidad de los selectores dentro.

Debe utilizar ems para los breakpoints de las media queries. Es la única unidad que funciona de manera constante en todos los navegadores principales si el usuario hace zoom en la página o cambia el tamaño de fuente predeterminado. Los breakpoint basados en píxeles y rem son menos fiables en Safari. Ems también tiene la ventaja de escalar hacia arriba o hacia abajo con el tamaño de fuente predeterminado del usuario, que generalmente es preferible.

Usé px en el ejemplo, pero es una mejor idea usar ems en tus media queries, según el tamaño de fuente predeterminado del navegador (generalmente 16px). En lugar de 560px, debes usar 35em (560/16).

Busque los estilos .title en su hoja de estilo e inserte la media querie en esta lista para agregar un comportamiento responsive al encabezado de la página.

          
.title > h1 {
  color: #333;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: .2em 0;
}

@media (min-width: 35em) {         1
  .title > h1 {
    font-size: 2.25rem;            2
  }
}
          
          Listado 8.7. Agregar un breakpoint a los estilos de título de la página
        

1. Objetivos puntos de corte por encima de 35em
2. Anula el tamaño de fuente móvil (1,5 rem) por uno más grande

Ahora el título tiene dos tamaños de fuente diferentes, según el tamaño de la ventana gráfica. Será de 1,5rem para las ventanas gráficas por debajo de 35em y de 2,25rem para las de arriba.

Puede probar estos estilos cambiando el tamaño del ancho de la ventana de su navegador. Hazlo más estrecho y verás el título para móviles más pequeño. Luego, expanda lentamente la ventana de su navegador. Verá que el tamaño de fuente cambia de manera fluida debido al tamaño de fuente adaptable (calc()) aplicado a la página (lista 8.2). Una vez que alcanza un ancho de 35em (o 560px), el tamaño de fuente del título se ajustará a uno más grande de 2,25rem.

Este punto, donde la ventana tiene 560px de ancho, se conoce como breakpoint. La mayoría de las veces, reutilizará los mismos breakpoints en varias media queries a lo largo de su hoja de estilo. Discutiremos cómo elegir estos breakpoints más adelante en el capítulo.

8.2.1. Comprender los tipos de media query

Puede refinar aún más una media query uniendo las dos cláusulas con la palabra clave and:

          
@media (min-width: 20em) and (max-width: 35em) { ... }
          
        

Esta media query combinada solo se dirige a dispositivos que cumplen con ambos criterios. Si desea una media query que se dirija a uno de varios criterios, use una coma:

          
@media (max-width: 20em), (min-width: 35em) { ... }
          
        

Este ejemplo se dirige tanto a las ventanas gráficas de 20em y más estrechas como a las de 35em y más anchas.

En las fichas, usó el min-width, que se orienta a los dispositivos con una ventana gráfica por encima de un ancho determinado, y el max-width, que se orienta a los dispositivos por debajo de un ancho determinado. Cada uno de estos se denomina funciones multimedia (media feature).

min-width y max-width son los más comunes que usará con diferencia. Pero también puede utilizar otros tipos de funciones multimedia. A continuación, se muestran algunos ejemplos:

• (min-height: 20em): se orienta a las ventanas gráficas de 20em o más
• (max-height: 20em): se orienta a las ventanas gráficas de 20em o más
• (orientation: landscape): se orienta a las ventanas gráficas que son más anchas que altas
• (orientation: portrait): se dirige a las ventanas gráficas que son más altas que anchas
• (min-resolution: 2dppx): se dirige a dispositivos con una resolución de pantalla de 2 puntos por píxel o más; objetivos pantallas de retina
• (max-resolution: 2dppx): se dirige a dispositivos con una resolución de pantalla de hasta 2 puntos por píxel

Consulte la documentación de MDN en https://developer.mozilla.org/en-US/docs/Web/CSS/@media para obtener una lista completa de las características de los medios.

Las media queries basadas en resolución pueden ser un poco complicadas, ya que la compatibilidad con el navegador es más reciente. Algunos navegadores tienen soporte limitado y / o requieren una sintaxis propietaria. IE9-11 y Opera Mini, por ejemplo, no son compatibles con la unidad dppx, por lo que deberá utilizar la unidad ppp (puntos por pulgada) en su lugar (por ejemplo, 192 ppp en lugar de 2 dppx). Safari y iOS Safari admiten la función de medios patentada -webkit-min-device-pixel-ratio. En resumen, la mejor manera de apuntar a una pantalla de alta resolución (retina) es combinar las dos:

          
@media (-webkit-min-device-pixel-ratio: 2),
      (min-resolution: 192dpi) { ... }
          
        

Este enfoque funcionará en todos los navegadores modernos. Úselo cuando desee mostrar imágenes o íconos de mayor resolución en pantallas que puedan beneficiarse de ellos. De esta manera, los usuarios con pantallas de menor resolución no desperdiciarán ancho de banda cargando imágenes más grandes cuando no podrán ver la diferencia. Veremos más en imágenes responsive más adelante en este capítulo.

También puede colocar una media query en la etiqueta <link>. Si agrega <link rel = "stylesheet" media = "(min-width: 45em)" href = "large-screen.css" /> a su página, se aplicará el contenido del archivo large-screen.css a la página solo si la media query de min-width es verdadera. Tenga en cuenta que la hoja de estilo siempre se descargará, independientemente del ancho de la ventana gráfica, por lo que esta es simplemente una táctica para la organización del código, no para la reducción del tráfico de la red.

Una última opción disponible en sus media queries es la capacidad de apuntar al tipo de medio (media type). Los dos tipos de medios en los que generalmente tendrá que pensar son screen y print. El uso de una media query de print le permite controlar cómo se distribuirá su página si el usuario imprime la página, por lo que puede hacer cosas como eliminar imágenes de fondo (para ahorrar tinta6#41; y ocultar la navegación innecesaria. Cuando un usuario imprime la página, normalmente solo quiere el texto de la página principal.

Para escribir estilos de impresión que se apliquen solo al imprimir, use la consulta @media print. No se necesitan paréntesis como con el min-width y otras características de los medios. Para apuntar solo a la pantalla, use @media screen.

Cuando se trata del desarrollo de CSS, los estilos de impresión suelen ser una ocurrencia tardía, si es que se tienen en cuenta. Sin embargo, es bueno considerar si sus usuarios podrían querer imprimir alguna de sus páginas. Para ayudar con la impresión, hay algunos pasos comunes que debe seguir. En la mayoría de los casos, será útil aplicar estilos de impresión básicos dentro de una media query @media print {...}.

Use display: none para ocultar partes no esenciales de la página, como menús de navegación y pies de página. Si un usuario está imprimiendo una página, es casi seguro que solo se preocupará por el contenido principal de la página.

También puede cambiar globalmente los colores de fuente a negro y eliminar todas las imágenes y colores de fondo detrás de bloques de texto. En muchos casos, un selector universal hace el trabajo para esto. Utilizo !important aquí, así que no tengo que preocuparme de que la cascada lo anule:

          
@media print {
  * {
    color: black !important;
    background: none !important;
  }
}
          
        

Dedicar incluso una pequeña cantidad de tiempo a los estilos de impresión puede ser un gran servicio para sus usuarios. Si está trabajando en un sitio donde espera mucha impresión (por ejemplo, un sitio de recetas), querrá dedicar más tiempo a asegurarse de que todo se imprima correctamente.

8.2.2. Agregar puntos de breakpoints a la página

En términos prácticos, un enfoque centrado en los dispositivos móviles ( significa que el tipo de media query que utilizará con mayor frecuencia debe ser de min-width. Primero, escribirás los estilos de tu dispositivo móvil, fuera de las media queries. Luego, avanzará hacia los breakpoints más grandes. Esto sigue la estructura general que se muestra en el listado 8.8. (No es necesario que agregue esto a su página todavía).

          
.title {                        1
  ...
}

@media (min-width: 35em) {      2
  .title {
    ...
  }
}

@media (min-width: 50em) {      3
  .title {
    ...
  }
}
          
          Listado 8.8. Estructura general de CSS responsive
        

1. Estilos móviles; aplicado a todos breakpoints
2. Breakpoint medio; anula ciertos estilos para dispositivos móviles
3. Gran breakpoint; anula la selección de estilos de breakpoints pequeños y medianos

Los estilos móviles son lo primero. Debido a que están fuera de las media queries, estas reglas se aplican a todos los breakpoints. A esto le sigue una media query para apuntar a pantallas medianas con reglas que anulan y se basan en los estilos móviles. La última es una media query para apuntar a pantallas grandes, donde agrega la capa final.

Dependiendo de su diseño, puede tener solo un breakpoint o puede tener varios. Para muchos elementos de su página, es posible que no necesite agregar estilos para cada breakpoint; las reglas en los breakpoints pequeños o medianos pueden estar completas para tener en cuenta también los breakpoints más grandes.

En ocasiones, sus estilos solo para dispositivos móviles pueden ser complejos. Puede resultar tedioso anular estas reglas en un breakpoint mayor. En este caso, podría tener sentido contener estos estilos en una media query de max-width para que solo se apliquen en el breakpoint más pequeño. Sin embargo, demasiadas media queries de max-width podrían ser una señal de que no ha seguido el enfoque mobile first. Deberían ser una excepción y no la regla.

Agreguemos el resto de los estilos para el breakpoint medio. En una pantalla más grande, hay más espacio para trabajar, por lo que puede aflojar el espacio. En la lista 8.9, agregará un poco más de relleno al encabezado y a los elementos principales. Luego, agregará mucho más relleno a la imagen principal para que "resalte" y agregue más interés visual a la página. Ya no necesita ocultar el menú de navegación, por lo que también ocultará el botón de hamburguesa y revelará el menú en todo momento (lista 8.10). Finalmente, puede cambiar el contenido principal a un diseño de tres columnas (listado 8.116#41;. Posteriormente, la página se verá como la figura 8.8.

Varios de estos cambios son sencillos, como ligeros aumentos en el relleno o el tamaño de la fuente. Por lo general, es mejor agregar cada cambio inmediatamente siguiendo las reglas de los selectores asociados. Para simplificar, los he consolidado en la lista 8.9. Agrégalos a tu hoja de estilo.

          
.page-header {
  padding: 0.4em 1em;
  background-color: #fff;
}

@media (min-width: 35em) {
  .page-header {
    padding: 1em;                        1
  }
}

.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans.jpg);
  background-size: 100%;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.3em #000;
}

@media (min-width: 35em) {
  .hero {
    padding: 5em 3em;                    2
    font-size: 1.2rem;
  }
}

main {
  padding: 1em;
}

@media (min-width: 35em) {
  main {
    padding: 2em 1em;                    3
  }
}
          
          Listado 8.9. Ajustes de relleno y fuente para el breakpoint medio
        

1. Aumenta el relleno del encabezado
2. Aumenta el tamaño de fuente y el relleno de la imagen de héroe
3. 3 Aumenta el padding en el main

Asegúrese siempre de que cada media querie viene después de los estilos que anula, de modo que los estilos dentro de la media querie tengan prioridad. Cambie el tamaño de su navegador de estrecho a ancho para ver estos cambios encajar en su lugar por encima de 35em.

A continuación, trabajemos en el menú. Esto implicará dos cambios: primero, eliminará el comportamiento de apertura y cierre del menú desplegable para que esté siempre visible. En segundo lugar, cambiará el menú de enlaces apilados verticalmente a otros horizontales. Ambos están hechos a continuación. Agregue estos bloques de media query a su hoja de estilo siguiendo los estilos que ya tiene para .menu y .nav-menu.

          
@media (min-width: 35em) {
  .menu-toggle {
    display: none;                 1
  }

  .menu-dropdown {
    display: block;                1
    position: static;              2
  }
}

@media (min-width: 35em) {
  .nav-menu {
    display: flex;                 3
    border: 0;
    padding: 0 1em;
  }

  .nav-menu > li {
    flex: 1;                       3
  }
  .nav-menu > li + li {
    border: 0;
  }

  .nav-menu > li > a {
    padding: 0.3em;
    text-align: center;
  }
}
          
          Listado 8.10. Reestructurar el menú de navegación para un breakpoint medio
        

1. Oculta el botón de alternancia y revela el contenido del menú desplegable
2. Anula el posicionamiento absoluto
3. Cambia el menú a un contenedor flexible y permite que los elementos crezcan hasta llenar el ancho de la pantalla

A pesar de que el menú tenía muchos estilos complicados para que el diseño móvil funcionara, no se necesita mucho para anularlos y revertir el diseño a un elemento de visualización en bloque estático. No necesitará anular las propiedades top, left y right de los estilos para dispositivos móviles, ya que ahora no tienen ningún efecto con el posicionamiento estático.

Flexbox hace un gran enfoque aquí para los elementos de la lista; crecerán para llenar el ancho disponible. También ha ajustado el relleno de los elementos del menú como lo hizo con otros elementos; pero esta vez, ha reducido el padding. Con un breakpoint medio, puede asumir que el usuario no está en un teléfono pequeño, por lo que no necesita que las áreas en las que se puede hacer clic sean tan grandes.

8.2.3. Agregar columnas responsive

El cambio final que se debe realizar para el breakpoint medio es la introducción de varias columnas. Esto se hace exactamente como los diseños de varias columnas que ha creado en los capítulos anteriores. Simplemente debe incluirlos en una media query para que no se apliquen por debajo de un determinado breakpoint.

Cuando escribió su marcado, agregó una clase de row y column en la que anticipó un diseño de tres columnas. Definamos los estilos para esos ahora. Agregue este listado a su hoja de estilo.

          
@media (min-width: 35em) {
  .row {
    display: flex;                1
    margin-left: -.75em;          2
    margin-right: -.75em;
  }

  .column {
    flex: 1;                     1
    margin-right: 0.75em;        3
    margin-left: 0.75em;
  }
}
          
          Listado 8.11. Diseño de tres columnas dentro de una media query
        

1. Utiliza flexbox para columnas de igual ancho
2. Utiliza márgenes negativos para ampliar el contenedor de filas para compensar los márgenes de las columnas (capítulo 4, sección 4.5.2)
3. Agrega canaletas de columna

Ahora, cambie el tamaño de su navegador para ver las columnas encajar en su lugar en el breakpoint. No se aplican estilos específicos a estos elementos por debajo del breakpoint, por lo que se apilan unos sobre otros de acuerdo con el flujo normal de documentos. Por encima del breakpoint, se convierten en un contenedor flexible con elementos flexibles.

Una gran cantidad de diseño responsive se reducirá a este tipo de enfoque: cuando su diseño requiera elementos uno al lado del otro, solo colóquelos uno al lado del otro en pantallas más grandes. En pantallas más pequeñas, permita que sus elementos se sienten en su propia línea y llenen el ancho de la pantalla. Esta técnica se puede aplicar a columnas, objetos multimedia o cualquier otro elemento que se sienta apretado en una pantalla estrecha. Quizás se pregunte cómo llegué a un punto de ruptura de 35em en el listado 8.7. Lo elegí porque este es el punto donde las tres columnas comenzaron a sentirse abarrotadas. En este caso, por debajo de 35ems, las columnas eran demasiado estrechas.

El diseñador web Brad Frost ha compilado una lista de patrones responsive que puede explorar en https://bradfrost.github.io/this-is-responsive/patterns.html. Puede organizar sus columnas para un diseño responsive como una columna ancha y una columna estrecha, columnas de igual ancho o un diseño de dos o tres columnas, por nombrar algunos ejemplos. En última instancia, estos arreglos se reducen a una variación de nuestro enfoque aquí, con una combinación de columnas o anchos de columna.

A veces, ni siquiera necesitará las media queries, ya que el ajuste de línea natural se encargará de eso por usted. Los diseños de Flexbox que usan flex-wrap: wrap y una flex-basis razonable son una excelente manera de hacer esto. De manera similar, un diseño de cuadrícula con columnas de cuadrícula con auto-fit o auto-fill determinará cuántos elementos encajarán en una fila antes de pasar a una nueva. También puede usar elementos de bloque en línea, aunque en ese caso, no crecerán para llenar el ancho del contenedor.

Comencé este capítulo llevándote primero a través de los elementos responsive más simples de la página, para que te acostumbres a usar las media queries. La mayoría de las veces, querrá comenzar a establecer breakpoints con las partes de su diseño que tienen varias columnas. Pruebe varios breakpoint hasta que encuentre uno que se sienta bien. Asegúrese de que sus columnas no sean demasiado estrechas por encima de ese límite.

Es fácil dejarse atrapar pensando en dispositivos específicos. Un iPhone 7 tiene tantos píxeles de ancho; una determinada tableta es esa cantidad. Trate de no preocuparse por eso. Encontrarás cientos de dispositivos con cientos de resoluciones de pantalla diferentes; nunca los probarás todos. Elija los breakpoints que tengan sentido para su diseño y funcionará bien, independientemente del dispositivo que tenga el usuario.

Las Media queries crean diseños responsive basados en el tamaño de la ventana gráfica, pero durante varios años, los desarrolladores y los proveedores de navegadores han estado tratando de encontrar una mejor manera. La característica que a muchos desarrolladores les gustaría ver son las container queries (llamadas element queries).

En lugar de responder a la ventana gráfica, este tipo de consulta permitiría que los estilos respondieran al tamaño del contenedor de un elemento. Considere el objeto multimedia que construyó en el capítulo 4.

Un objeto multimedia con imagen y texto uno al lado del otro.

Esto funciona en una pantalla más grande cuando hay espacio para un diseño lado a lado de la imagen y el contenido. Pero en un diseño móvil, este tipo de patrón a menudo se divide para que la imagen se apile sobre el texto.

Una versión apilada del objeto multimedia puede ser más apropiada cuando el espacio horizontal es limitado.

De vez en cuando, es posible que desee este diseño móvil en un gran breakpoint. Considere lo que sucedería si este objeto multimedia se colocara dentro de una columna estrecha (como las del listado 8.11): el contenedor sería demasiado estrecho para permitir el diseño de lado a lado, incluso por encima del punto de interrupción. En cambio, sería más apropiado si pudiera definir el comportamiento de respuesta del objeto multimedia basado no en el ancho de la ventana gráfica, sino más bien en el ancho de su contenedor. Desafortunadamente, esto no es posible directamente. La única forma de lograr este diseño es mediante el uso de selectores descendientes cuidadosamente construidos que tengan en cuenta este escenario (por ejemplo, .column .media> .media-image), pero este enfoque puede ser frágil.

Esté atento a las container queries para abordar esta necesidad. Las container queries son difíciles de implementar en el navegador, por lo que esta función aún no ha aparecido, pero tiene una gran demanda. Es de esperar que las container queries, o algo que pueda lograr el mismo resultado, lleguen a los navegadores en los próximos años.

8.3. DISEÑOS FLUIDOS

El tercer y último principio del diseño responsive es el fluid layout. El diseño fluido (a veces llamado liquid layout) se refiere al uso de contenedores que crecen y se encogen de acuerdo con el ancho de la ventana gráfica. Esto contrasta con un diseño fijo, donde las columnas se definen mediante píxeles o ems. Un contenedor fijo (por ejemplo, uno con widht: 800px) desbordará la ventana gráfica en dispositivos más pequeños, forzando la necesidad de desplazamiento horizontal. Un recipiente de líquido se contrae automáticamente para ajustarse.

En un diseño fluido, el contenedor de la página principal normalmente no tiene un ancho explícito o tiene uno definido mediante un porcentaje. Sin embargo, puede tener padding izquierdo y derecho, o margin izquierdo y derecho automáticos para agregar espacio para respirar entre sus bordes y los bordes de la ventana gráfica. Esto significa que puede ser un poco más estrecho que la ventana gráfica, pero nunca más ancho.

Dentro de los contenedores principales, las columnas se definen mediante un porcentaje (por ejemplo, una columna principal del 70% de ancho y una barra lateral del 30% de ancho). De esta manera, no importa cuál sea el ancho de la pantalla, los contenedores caben dentro. Un flexbox también funciona, asumiendo que los elementos flexibles tienen valores de flex-grow y, lo que es más importante, valores de flex-shrink que permiten que los elementos se ajusten independientemente del ancho de la pantalla. Acostúmbrese a pensar en los anchos de los contenedores en porcentajes en lugar de en cualquier tamaño fijo.

La página web de este capítulo no es el único ejemplo de flui container que ha visto. De hecho, he estado usando diseños fluidos casi exclusivamente a lo largo de este libro. A estas alturas, ya debería estar algo familiarizado con este enfoque.

Una página web es responsive de forma predeterminada. Antes de aplicar cualquier CSS, los elementos a nivel de bloque no son más anchos que la ventana gráfica y el ajuste de línea de los elementos en línea para evitar el desbordamiento horizontal. A medida que agrega estilos, es su trabajo mantener la naturaleza responsive de la página. A veces es más fácil decirlo que hacerlo, pero me resulta útil saber que siempre empiezo en un buen estado.

8.3.1. Agregar estilos para una ventana gráfica grande

Agreguemos más media queries para su próximo breakpoint. Mientras lo hace, observe cómo en cada breakpoint nunca arregla el ancho de los contenedores. Les permite crecer de forma natural al 100% (menos algo de padding y / o margin). Y, en el caso de la parte de tres columnas de la página, usa flexbox para permitir que las columnas alcancen columnas un tercio del ancho de la ventana gráfica.

El diseño final y grande de la ventana gráfica de su página se muestra en la figura 8.9. Es similar a la ventana gráfica mediana, pero hay mucho más espacio para trabajar aquí. Puedes ser liberal con el padding, así que eso es exactamente lo que harás.

El padding a lo largo de los bordes izquierdo y derecho se ha aumentado de 1em a 4em. El padding en todos los lados del texto de la imagen principal también se ha aumentado, lo que permite un gráfico más grande. Los estilos adicionales se muestran en el listado 8.12.

Agregue todos los bloques de media queries (min-width: 50em) a su hoja de estilo. Nuevamente, asegúrese de que aparezcan debajo de las reglas equivalentes en breakpoints más pequeños (para .page-header, .hero y main) para que los estilos de estas media queries puedan anularlos.

          
@media (min-width: 50em) {
  .page-header {
    padding: 1em 4em;         1
  }
}

@media (min-width: 50em) {
  .hero {
    padding: 7em 6em;         2
  }
}

@media (min-width: 50em) {
  main {
    padding: 2em 4em;         1
  }
}

@media (min-width: 50em) {
  .nav-menu {
    padding: 0 4em;           1
  }
}
          
          Listado 8.12. Aumento de padding para grandes puntos de interrupción
        

1. Aumenta el padding izquierdo y derecho en los bordes de la página a 4em
2. Aumenta el padding de héroe en todos los lados para una imagen de héroe más grande

Se necesita un último ajuste. Ha definido un tamaño de fuente responsive en el elemento raíz: font-size: calc(1vw + 0.6em). En pantallas grandes, esto se vuelve demasiado grande para mi gusto. Para solucionarlo, puede aplicar un límite superior a este tamaño de fuente en su punto de interrupción más alto. Actualice su hoja de estilo para que coincida con esta lista.

          
:root {
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);
}

@media (min-width: 50em) {
  :root {
    font-size: 1.125em;             1
  }
}
          
          Listado 8.13. Agregar un límite superior al tamaño de fuente adaptable
        

1. Aplica un tamaño de fuente sin escala por encima del breakpoint más alto

Ahora tiene una página responsive con tres breakpoints. Anímate y experimenta con él. Cambie los anchos de los breakpoints y vea cómo afecta su experiencia de navegación.

8.3.2. Lidiar con las tablas

Las tablas son particularmente problemáticas para el diseño fluido en dispositivos móviles. Si una tabla tiene más de un puñado de columnas, puede desbordar fácilmente el ancho de la pantalla (figura 8.10).

Si es posible, te recomiendo que encuentres otra forma de organizar los datos para los usuarios de dispositivos móviles. Por ejemplo, puede mover los datos de cada fila a su propio mosaico y luego permitir que los mosaicos se apilen unos sobre otros. O bien, puede crear un gráfico visual o un cuadro que se adapte bien a las ventanas gráficas más pequeñas. A veces, sin embargo, solo necesitas una tabla.

Un enfoque que puede tomar es forzar a la tabla a mostrarse como elementos de bloque normales. La figura 8.11 muestra un ejemplo de esto.

Este diseño se compone de elementos <table>, <tr> y <td>, pero se ha aplicado la declaración display: block, anulando sus valores normales de visualización de tabla, fila de tabla y celda de tabla. Puede utilizar una media query de max-width para limitar estos cambios a ventanas gráficas pequeñas. El CSS de esta tabla se muestra en la siguiente lista. (Puede aplicar esto a cualquier marcado <table> para ver los resultados).

          
table {
  width: 100%;
}

@media (max-width: 30em) {
  table, thead, tbody, tr, th, td {
    display: block;                  1
  }

  thead tr {
    position: absolute;              2
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin-bottom: 1em;              3
  }
}
          
          Listado 8.14. Forzar un diseño de tabla responsive en un dispositivo móvil
        

1. Hace que todos los elementos de la tabla se muestren en bloque
2. Oculta la fila de títulos moviéndola fuera de la pantalla
3. Agrega un pequeño espacio entre cada conjunto de datos de la tabla

Esto hace que cada celda se apile una encima de la otra, luego agrega un margen entre cada <tr>. Este enfoque hace que la fila <thead> ya no se alinee con las columnas debajo de ella, por lo que uso un posicionamiento absoluto para eliminar la fila del encabezado de la vista. Evito display: none por accesibilidad: quiero que los títulos permanezcan presentes en un lector de pantalla. Esta no es una solución perfecta de ninguna manera, pero cuando todo lo demás falla, podría ser el mejor enfoque.

8.4 IMAGENES RESPONSIVE

En el diseño responsive, las imágenes necesitan una atención especial. No solo necesita colocarlos en la pantalla, también debe considerar las limitaciones de ancho de banda de los usuarios móviles. Las imágenes tienden a estar entre los recursos más grandes utilizados en una página. Lo primero que debes hacer es asegurarte siempre de que tus imágenes estén bien comprimidas. Use la opción Guardar para web en su editor de imágenes, que reducirá en gran medida el tamaño del archivo de la imagen, o use otra herramienta de compresión de imágenes como https://tinypng.com/.

También debe asegurarse de que no tengan una resolución superior a la necesaria. Sin embargo, determinar qué significa "necesario" depende del tamaño de la ventana gráfica. No es necesario publicar un archivo tan grande en pantallas más pequeñas porque de todos modos se reducirán.

8.4.1. Usar varias imágenes para diferentes tamaños de ventana gráfica

La mejor práctica es crear algunas copias de una imagen, cada una con una resolución diferente. Si sabe, según las media queries, que la pantalla tiene un tamaño determinado, no tiene sentido enviar una imagen extremadamente grande; el navegador tendrá que reducir su escala para que encaje.

Utilice técnicas responsive para ofrecer cada una a los usuarios con el tamaño de pantalla adecuado. Para la imagen principal de su página, se parece al CSS que se muestra aquí. Agregue esto a su hoja de estilo.

          
.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans-small.jpg);         1
  background-size: 100%;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.3em #000;
}

@media (min-width: 35em) {
  .hero {
    padding: 5em 3em;
    font-size: 1.2rem;
    background-image: url(coffee-beans-medium.jpg);      2
  }
}

@media (min-width: 50em) {
  .hero {
    padding: 7em 6em;
    background-image: url(coffee-beans.jpg);             3
  }
}
          
          Listado 8.15. Agregar una imagen de fondo responsive
        

1. Utiliza la imagen más pequeña en dispositivos móviles
2. Utiliza una imagen más grande en pantallas de tamaño mediano|
3. Utiliza la imagen de resolución completa en pantallas grandes

Si carga esto en su navegador, no notará ninguna diferencia. Y ese es exactamente el punto. Si se encuentra en un punto de interrupción pequeño, su pantalla no es lo suficientemente ancha para mostrar la imagen de resolución completa de todos modos. Pero descargó decenas o incluso cientos de kilobytes menos que la imagen de resolución completa. En una página con muchas imágenes, esto puede sumarse y causar una diferencia notable en el tiempo de carga de la página.

8.4.2. Usando srcset para servir la imagen correcta

Las media queries resuelven el problema cuando la imagen se incluye a través de CSS, pero ¿qué pasa con las imágenes agregadas a través de la etiqueta HTML <img>? Para las imágenes en línea, es necesario un enfoque diferente: el atributo srcset (abreviatura de "source set").

Este atributo es una adición más reciente a HTML. Le permite especificar varias URL de imagen para una etiqueta <img>, especificando la resolución de cada una. Luego, el navegador determinará qué imagen necesita y la descargará.

          
<img alt="A white coffee mug on a bed of coffee beans"
    src="coffee-beans-small.jpg"                         1
    srcset="coffee-beans-small.jpg 560w,                 2
            coffee-beans-medium.jpg 800w,                2
            coffee-beans.jpg 1280w"                      2
/>
          
          Listado 8.16. Imagen srcset responsive
        

1. Proporciona un src normal para navegadores que no admiten srcset (por ejemplo, IE y Opera Mini)
2. URL de cada imagen y su ancho

La mayoría de los navegadores ahora son compatibles con srcset, pero los que no lo hacen recurrirán al src especificado y cargarán la URL que se especifique allí. Esto le permite optimizar para múltiples tamaños de pantalla. Aún mejor, el navegador hará ajustes para pantallas de mayor resolución. Si la pantalla del dispositivo tiene una densidad de píxeles de 2x, puede descargar una imagen de mayor resolución en consecuencia.

Para ver más de cerca las imágenes receptivas, visite https://jakearchibald.com/2015/anatomy-of-responsive-images/. Este artículo cubre algunas otras opciones útiles, como ajustar el tamaño de la pantalla según la imagen que se cargue.

Como parte de un diseño fluido, siempre debe asegurarse de que las imágenes no desborden el ancho de su contenedor. Hágase un favor y agregue siempre esta regla a su hoja de estilo para evitar que eso suceda: img {max-width: 100%; }.

La estructuración de regiones de la página en diseño responsive se puede realizar de innumerables formas. La construcción de cualquiera de ellos se reduce a la aplicación de los tres principios: mobile first, media queries y fluid layout.

RESUMEN

• Siempre cree sus diseños mobile first primero.
• Utilice media queries para mejorar progresivamente la página en ventanas gráficas cada vez más grandes.
• Utilice fluid layouts que se ajusten a la pantalla en cualquier tamaño de navegador.
• Utilice imágenes responsive para adaptarse a la limitación de ancho de banda de los dispositivos móviles.
• No olvide incluir su metaetiqueta de ventana gráfica.