15. Diseño responsivo con consultas de medios

Capítulo 15: Diseño responsivo con consultas de medios

En nuestro camino para convertirnos en un desarrollador front-end eficiente, un aspecto que no podemos ignorar es el diseño responsivo. El diseño responsivo es un enfoque de desarrollo web que hace que nuestras páginas web se ajusten al dispositivo del usuario, ya sea un escritorio, tableta o teléfono inteligente. Con el uso cada vez mayor de dispositivos móviles para acceder a Internet, el diseño responsivo se ha convertido en una necesidad absoluta. En este capítulo, exploraremos uno de los pilares principales del diseño responsivo: las consultas de medios.

¿Qué son las consultas de medios?

Las consultas de medios son una característica de CSS3 que permite que la representación del contenido se adapte a diferentes tipos de dispositivos en función de características específicas como el ancho y alto de la ventana gráfica, la resolución de la pantalla y la orientación. Con las consultas de medios, podemos escribir CSS específico que solo se aplicará si se cumplen ciertas condiciones.

¿Cómo utilizar Media Queries?

Una consulta de medios se compone de un tipo de medio y al menos una expresión que limita las hojas de estilo según las características específicas del dispositivo. Por ejemplo:

@media pantalla y (ancho mínimo: 600px) {
  cuerpo {
    color de fondo: azul claro;
  }
}

En este ejemplo, el CSS dentro de la consulta de medios solo se aplicará si el tipo de medio es "pantalla" (es decir, no se imprime o similar) y el ancho de la ventana gráfica es de 600 píxeles o más.

Tipos de medios

Hay varios tipos de medios a los que puede dirigirse con consultas de medios, incluidos "todos" (para todos los dispositivos), "imprimir" (para impresoras), "pantalla" (para pantallas de computadora, tabletas, teléfonos inteligentes, etc.), " discurso" (para lectores de pantalla que "leen" la página en voz alta).

Características del dispositivo

Las características del dispositivo que puede probar en una consulta de medios incluyen cosas como "ancho", "alto", "orientación" (si el dispositivo está en modo vertical u horizontal), "resolución" (resolución de pantalla), entre otras.

Diseño responsivo con consultas de medios

Al utilizar consultas de medios, puede crear diseños que se adapten y respondan a diferentes tamaños de pantalla y dispositivos. Por ejemplo, es posible que tenga un diseño de tres columnas en una pantalla grande, que cambie a un diseño de una columna en una pantalla pequeña.

Para hacer esto, puede utilizar una consulta de medios para aplicar diferentes estilos CSS según el ancho de la ventana gráfica. Por ejemplo:

@pantalla multimedia y (ancho máximo: 600 px) {
  .columna {
    ancho: 100%;
  }
}

En este ejemplo, si el ancho de la ventana gráfica es de 600 píxeles o menos, el ancho de cualquier elemento con la clase 'columna' será del 100 %, creando efectivamente un diseño de una columna.

Conclusión

Las consultas de medios son una poderosa herramienta para crear diseños responsivos. Le permiten personalizar la apariencia de su sitio web para diferentes dispositivos y tamaños de pantalla, mejorando la experiencia del usuario. En el próximo capítulo, exploraremos más sobre cómo combinar HTML, CSS y JavaScript para crear interacciones dinámicas en su sitio web.

Siguiente página del libro electrónico gratuito:

62Introducción a Bootstrap

3 minutos