El diseño web responsivo (RWD) es el uso de HTML y CSS para cambiar el tamaño, ocultar, reducir o expandir automáticamente un sitio web, para que sea lucir genial en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).
Primero enfoque móvil
Se trata de comenzar con el diseño del producto primero para una versión móvil que incluya las funciones más básicas y luego pasamos a la versión avanzada para tablet o PC.
Este primer enfoque Móvil evita la pérdida de contenido al pasar de una pantalla más grande a una pantalla más pequeña.
En efecto, si tomamos como punto de partida el diseño del producto final móvil, bajo restricciones como el ancho de banda,
tamaño de la pantalla, etc., los diseñadores tomarán naturalmente los puntos clave de un producto para convertirlo en un producto sobrio y ordenado con características prioritarias.
También desde 2016, sabemos que el uso de Internet móvil superó el uso de escritorio en 2016.
Usar consultas de medios
Es la tecnología CSS basada en media-queries la que permite esta adaptación.
El principio es simple: a partir de un tamaño de pantalla determinado, aplicamos un CSS específico para cambiar la presentación: esto se denomina punto de ruptura.
Con el siguiente código, el código CSS se ejecutará tan pronto como el tamaño de la pantalla sea mayor o igual a 600 px:
@media screen and (min-width: 600px) {
/* css to execute */
}
Por ejemplo, cambiaremos el color de fondo de la página (azul) tan pronto como el tamaño de la pantalla sea mayor a 600px:
@media screen and (min-width:600px{
body{
background-color: red;
}
})
Consultas de medios y Mobile First
En un enfoque Mobile First, primero debemos crear el CSS para formatos móviles y luego usar consultas de medios para pantallas más grandes (escritorio).
De ahí el uso de la instrucción min-width que significa mayor o igual.
Siguiendo con el ejemplo anterior, vamos a cambiar el contenido de la página en relación al tamaño. Usaremos display: none para ocultar contenido inapropiado.
/* CSS pour le format mobile */
#desktop{
display: none;
}
#mobile{
display: block;
}
/* CSS pour les grands écrans */
@media screen and (min-width:600px){
#mobile{
display: none;
}
#desktop{
display: block;
}
})
Observe que el CSS móvil se realiza primero.
Agregar metaetiqueta de ventana gráfica
Si desea dar instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página, debe agregar HTML en el <head> parte de la siguiente metaetiqueta:
Hablamos de una imagen reactiva cuando se adapta al tamaño de las pantallas.
Para permitir que una imagen mantenga su tamaño original en una pantalla grande pero lo reduzca automáticamente en una pantalla pequeña, usamos el atributo max-width: 100%
Mostrar diferentes imágenes dependiendo del tamaño de la pantalla
El HTML <imagen> La etiqueta le permite definir diferentes imágenes para diferentes tamaños de pantalla. En el siguiente ejemplo, el contenido de la imagen cambia cuando estás en una pantalla grande
<picture >
<source media="(min-width: 650px)"
srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
<source media="(min-width: 465px)" srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
<!-- img tag for browsers that do not support picture element -->
<img src="https://googlechrome.github.io/samples/picture-element/images/kitten-small.png" alt="a cute kitten">
</picture>
Notice the media="(min-width: 500px) syntax which sets the breakpoint to 500px.
We also add, as seen previously, the CSS to adapt the image according to the size of the screen:
ES 
English - EN 
Français - FR 
