07 - Diseño Responsive

Diseño responsive
¡Hola! 👋
El diseño responsivo (“responsive”) es la práctica de crear páginas web que se
adaptan automáticamente a diferentes tamaños y orientaciones de pantalla,
brindando una experiencia de visualización óptima en varios dispositivos (de
escritorio, tablets o smartphones).
¡Comencemos! 🚀
Diseño Responsive
Para realizar un diseño responsivo se utilizan las “media queries”, que son una
técnica de CSS que permite aplicar estilos específicos a un documento HTML en
función de las características del dispositivo que lo está visualizando, como el
tamaño de la pantalla, la resolución, la orientación, entre otros. De esta manera, es
posible crear diseños web adaptables y optimizados para diferentes dispositivos.
Las media queries se definen usando la sintaxis “@media”, seguido de un conjunto

de reglas CSS.
@media (regla-de-media-queries: valor) {
reglas css
A continuación, te compartimos todas las opciones de uso posible de las media

queries:
● min-width: Se aplica cuando la anchura de la pantalla es mayor o igual a un
valor específico.
● max-width: Se aplica cuando la anchura de la pantalla es menor o igual a un
valor específico.
● min-height: Se aplica cuando la altura de la pantalla es mayor o igual a un
valor específico.
● max-height: Se aplica cuando la altura de la pantalla es menor o igual a un
valor específico.
● orientation: Se aplica según la orientación del dispositivo, ya sea portrait
(vertical) o landscape (horizontal).
● aspect-ratio: Se aplica según la relación entre el ancho y la altura de la
pantalla.
● device-aspect-ratio: Se aplica según la relación entre el ancho y la altura del
dispositivo.
● resolution: Se aplica según la resolución de la pantalla en píxeles por pulgada
(PPI) o en puntos por pulgada (DPI).
● min-resolution: Se aplica cuando la resolución de la pantalla es mayor o
igual a un valor específico.
● max-resolution: Se aplica cuando la resolución de la pantalla es menor o
igual a un valor específico.
● pointer: Se aplica según el tipo de dispositivo de entrada que se esté
utilizando, como none (para pantallas táctiles) o coarse (para dispositivos
con puntero menos preciso).
● hover: Se aplica según la presencia o no de un dispositivo de puntero que
permita la interacción a través de hover.
● any-pointer: Se aplica si el dispositivo tiene algún tipo de dispositivo de
entrada de puntero.
● any-hover: Se aplica si el dispositivo tiene algún tipo de dispositivo de
puntero que permita la interacción a través de hover.
En el siguiente video te ayudamos a comprender mejor cómo funcionan las medias

queries más utilizadas:
👉 Ver video
Armado de una media query
Las media queries se escriben en CSS utilizando la sintaxis adecuada. Aquí tienes un
ejemplo básico de cómo se arma una media query:
/* Estilos para pantallas más pequeñas (hasta 768px) */

@media (max-width: 768px) {
/* Aquí puedes escribir los estilos que se aplicarán en pantallas más
pequeñas */
body {
font-size: 16px;
}
.container {
width: 90%;
margin: 0 auto;
}
}
/* Estilos para pantallas más grandes (a partir de 769px) */

@media (min-width: 769px) {
/* Aquí puedes escribir los estilos que se aplicarán en pantallas más
grandes */
body {
font-size: 18px;
}
.container {
width: 80%;
margin: 0 auto;
}
}
En este ejemplo, se utilizan dos media queries para ajustar los estilos según el
tamaño de la pantalla:
En la primera media query, los estilos se aplicarán cuando el ancho de la pantalla

sea como máximo 768px (pantallas más pequeñas, como dispositivos móviles en
orientación vertical). Se han ajustado el tamaño de fuente y el ancho del
contenedor.
En la segunda media query, los estilos se aplicarán cuando el ancho de la pantalla
sea de al menos 769px (pantallas más grandes, como dispositivos de escritorio o
tabletas en orientación horizontal). Se han ajustado nuevamente el tamaño de
fuente y el ancho del contenedor.
Las media queries utilizan los operadores min-width (ancho mínimo) y max-width
(ancho máximo) para establecer condiciones en función del ancho de la pantalla.
Sin embargo, también puedes usar otras características, como min-height o
combinar varias condiciones con operadores lógicos (AND y OR) para crear media
queries más complejas.
Barra de navegación responsive

Antes de comenzar a escribir código es fundamental planificar la estructura de tu
barra de navegación.
💡 Un sistema muy util para determinar si la estructura de una página web y su

navegabilidad son buenas es mediante la regla del uso de los 3 clics. Si el usuario
no puede llegar de un punto de la página a su objetivo final mediante el uso de 3
clics implica que la navegabilidad puede mejorar.
Ahora que tenemos una mejor comprensión de las opciones y estructuras comunes
en las barras de navegación ya podemos comenzar a implementarla en el código
HTML y CSS.
El diseño responsive o adaptable permite crear sitios web que se ajusten de

manera automática a diferentes tamaños de pantalla y dispositivos.
Entre los beneficios del diseño responsive se encuentran:
● Mejor experiencia de usuario → Permite que el sitio web se ajuste al tamaño

de pantalla del dispositivo lo que facilita la navegación y la lectura del
contenido.
● Velocidad de carga → Mejora la velocidad de carga de la página
especialmente en dispositivos móviles con conexiones de internet más lentas.
● SEO → Favorece los motores de búsqueda lo que puede aumentar la
visibilidad en los resultados de búsqueda y generar más tráfico.
● Mantenimiento → Facilita el mantenimiento del sitio web ya que solo es
necesario actualizar una única versión del sitio en lugar de múltiples versiones
para diferentes dispositivos.
Por todo esto y más es importante entonces tener una barra de navegación
responsive que se adapte a diferentes tamaños de pantalla y dispositivos
garantizando una experiencia consistente y agradable para todos los usuarios.
Resumen
¡Felicidades!
Esperamos que esta información te haya sido de utilidad y que te lleves para
repasar:
● Como utilizar las media queries para adaptar tus diseños

07 - Diseño Responsive

Cargado por

Copyright:

Formatos disponibles

07 - Diseño Responsive

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

07 - Diseño Responsive

Cargado por

Copyright:

Formatos disponibles

Diseño responsive

Las media queries se definen usando la sintaxis “@media”, seguido de un conjunto

@media (regla-de-media-queries: valor) {

A continuación, te compartimos todas las opciones de uso posible de las media

En el siguiente video te ayudamos a comprender mejor cómo funcionan las medias

/* Estilos para pantallas más pequeñas (hasta 768px) */

/* Estilos para pantallas más grandes (a partir de 769px) */

En la primera media query, los estilos se aplicarán cuando el ancho de la pantalla

Barra de navegación responsive

💡 Un sistema muy util para determinar si la estructura de una página web y su

El diseño responsive o adaptable permite crear sitios web que se ajusten de

Entre los beneficios del diseño responsive se encuentran:

● Mejor experiencia de usuario → Permite que el sitio web se ajuste al tamaño

También podría gustarte