Qué es el RESPONSIVE WEB DESIGN - Bien explicado

¿Qué es el Responsive Web Design?

El Responsive Web Design es crear tu web usando HTML y CSS de forma que automáticamente se rescale y adapte para que se vea bien en todos los dispositivos (ordenadores, tablets, móviles, etc).

Configurando el Viewport

Para que las páginas sean responsive tenemos que añadir el <meta> del viewport a todos los documentos HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Imágenes Responsives

Las imágenes responsives se escalan de forma que se ven bien en todos los tamaños de navegador.

Podemos usar la propiedad de CSS width con el valor 100% y de esta forma la imagen se escalará.

See the Pen HTML | 1.29 - Responsive - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 Para que la imagen no se haga más grande que la imagen original y no se vea pixelada podemos usar la propiedad max-width y ponerla al 100% de este modo no se pasará del tamaño original.

See the Pen HTML | 1.29 - Responsive - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Mostrar diferentes imágenes para diferentes tamaños de navegador

El elemento <picture> nos permite definir diferentes imágenes para diferentes tamaños de ventana de navegador.

Rescala la ventana del navegador y verás como cambian las imágenes del ejemplo de abajo.

See the Pen HTML | 1.18 - El elemento picture - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Texto responsive

El tamaño del texto se puede hacer responsive usando la unidad “vw” que significa “viewport width”.

1vw = 1% del viewport width

See the Pen HTML | 1.29 - Responsive - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Media Queries

También es normal el uso de media queries para hacer responsive textos, imágenes, etc.

Con un media queries puedes definir estilos completamente diferentes para diferentes tamaños de navegador.

See the Pen HTML | 1.29 - Responsive - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Frameworks

Existen muchos frameworks que nos permiten realizar un diseño responsive. El más famoso y usado es Bootstrap.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.