El diseño web responsivo se refiere a crear páginas web que se vean bien en todos los dispositivos.
Un diseño web responsivo se ajustará automáticamente a diferentes tamaños de pantalla y ventanas gráficas(
viewports).
¿Qué es el diseño web responsivo?
El diseño web responsivo se refiere a usar HTML y CSS para cambiar el tamaño, ocultar, reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos):
Configurando el viewport
Para crear un sitio web responsivo, agrega la siguiente etiqueta <meta> a todas tus páginas web:
Ejemplo:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto configura el viewport de la página, que le dará al navegador instrucciones sobre cómo controlar las dimensiones y escala de la página.
Este es un ejemplo de una página web sin la metaetiqueta viewport y la misma página web con la metaetiqueta viewport:
Imágenes responsivas
Las imágenes responsivas son imágenes que se escalan muy bien para adaptarse a cualquier tamaño de navegador.
Usando la propiedad width
Si la propiedad CSS width se establece en 100%, la imagen será responsiva y escalará hacia arriba y hacia abajo.
Ejemplo:
Ten en cuenta que en el ejemplo anterior, la imagen se puede ampliar para que sea más grande que su tamaño original. Una mejor solución, en muchos casos, será usar la propiedad CSS max-width.
Usando la propiedad max-width
Si la propiedad max-width se establece en 100%, la imagen se reducirá si es necesario, pero nunca se escalará para ser más grande que su tamaño original:
Ejemplo:
Diferentes imágenes según el tamaño de pantalla
El elemento HTML <picture> le permite definir diferentes imágenes para diferentes tamaños de ventana del navegador.
Cambie el tamaño de la ventana del navegador para ver cómo cambia la imagen de abajo:
Ejemplo:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Tamaños de texto responsivos
El tamaño del texto se puede configurar con una unidad vw, que significa viewport width.
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:
Ejemplo:
viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 1vw es 0,5 cm.
Media queries
Además de cambiar el tamaño de texto e imágenes, también es común usar media queries en páginas web responsivas.
Con media queries puedes definir estilos completamente diferentes para diferentes tamaños de navegador.
Ejemplo: cambie el tamaño de la ventana del navegador para ver que los tres elementos div de abajo, se mostrarán horizontalmente en pantallas grandes y se apilarán verticalmente en pantallas pequeñas:
Ejemplo:
Diseño web responsivo - ejemplo
Una página web responsiva debe verse bien en pantallas grandes y en teléfonos móviles pequeños.
Ejemplo:
Diseño web responsivo - frameworks
Todos los frameworks CSS más populares ofrecen un diseño responsive.
Son gratuitos y fáciles de usar.
W3.CSS
W3.CSS es un framework CSS moderno con soporte para diseño de escritorio, tableta y móvil de forma predeterminada.
W3.CSS es más pequeño y más rápido que frameworks CSS similares.
W3.CSS está diseñado para ser independiente de jQuery o cualquier otra librería de JavaScript.
Ejemplo:
Bootstrap
Otro framework CSS popular es Bootstrap. Bootstrap utiliza HTML, CSS y jQuery para crear páginas web responsivas.
Ejemplo:
Resumen
El diseño web responsivo se refiere a crear páginas web que se vean bien en todos los dispositivos.
Un diseño web responsivo se ajustará automáticamente a diferentes tamaños de pantalla y ventanas gráficas(viewports).
Traducido con 💚 desde W3Schools.com