Lección 24: Responsive Design

Bloquear zoom

Por defecto, un navegador aplicará un zoom en versiones de móvil para ajustar el tamaño de los textos; lo cual estropeará un diseño adaptable. La solución es indicar con el meta viewport que el usuario no pueda reescalar, gesto de pellizco, ni el navegador ajuste el zoom.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

Container

Conseguir un contenedor adaptativo.

Centrado.
Anchura máxima a 1000px.
Relleno en versión móvil.

.container {
    margin: 0 auto;
    max-width: 1000px;
    padding: 1rem;
}

Media queries.

Añade CSS si se cumple la condición.

El prefijo “min-“ o “max-“ expresan restricciones de “condición mínima” o “condición máxima”.

En el siguiente caso se aplicará el color de fondo si la anchura del navegador es inferior a 600px.

@media screen and (max-width: 600px) {
  article {
    background-color: orange;
  }
}

split media

Una estrategia muy cómoda es dividir el CSS en 3 ficheros: comunes entre resoluciones (main.css), solo para smartphones (mobile.css) y solo para escritorio (desktop.css).

<link href="css/main.css" rel="stylesheet">
<link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
<link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 601px)">

Puedes ampliar la técnica en el siguiente artículo o usar la plantilla de Sapps para webs responsives.

Imágenes

Es recomendable que todas nuestras imágenes dispongan una anchura de 100% para que sean adaptables al diseño.

img {
  width: 100%;
}

Menú móvil o de hamburguesa.

A continuación puedes seguir las técnicas para conseguir diferentes tipos de menús.

sticky

Nos permite que un elemento se fije al scroll hasta que su contenedor padre se quede sin espacio.

Puedes ver un ejemplo.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario