¿Qué es el RESPONSIVE WEB DESIGN? - Bien explicado

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

¿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.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats