Curso de HTML5 y CSS3: Responsive - Media Queries

¿Qué son las Media Queries?

Las Media Queries son una función de CSS que permite aplicar estilos específicos a diferentes dispositivos o condiciones de visualización. Estas condiciones pueden basarse en características como el ancho o la altura de la ventana del navegador, la resolución de pantalla y la orientación.

La sintaxis básica de una Media Query es la siguiente:

@media (condiciones) {
    /* Estilos específicos */
}

Por ejemplo, si queremos aplicar estilos diferentes para pantallas con un ancho máximo de 600 píxeles, usaríamos:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Por qué usar Media Queries

Adaptabilidad: Permiten que el diseño de tu sitio se ajuste automáticamente a diferentes tamaños de pantalla.
Experiencia de usuario: Mejoran la accesibilidad, facilitando la navegación en dispositivos móviles.
SEO: Un sitio web responsivo puede mejorar tu posicionamiento en motores de búsqueda.

Ejemplos de uso de Media Queries

A continuación, veremos algunos ejemplos prácticos de Media Queries que pueden ser utilizados en tu proyecto:

1. Cambiando el diseño para dispositivos móviles

Supongamos que tenemos un diseño de dos columnas en pantallas grandes, y queremos que se convierta en una sola columna en pantallas más pequeñas. Aquí está el código CSS:

body {
    display: flex;
    flex-direction: row;
}

.column {
    flex: 1;
}

@media (max-width: 768px) {
    body {
        flex-direction: column;
    }
}

2. Ajustando el tamaño de fuentes

Podemos también modificar el tamaño de las fuentes según el ancho de la pantalla:

h1 {
    font-size: 2em;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.5em;
    }
}

3. Ocultando elementos en dispositivos móviles

Si hay algún elemento que solo es relevante en pantallas grandes, podemos ocultarlo en dispositivos móviles con la siguiente Media Query:

.desktop-only {
    display: block;
}

@media (max-width: 600px) {
    .desktop-only {
        display: none;
    }
}

Consejos para implementar Media Queries

Utiliza puntos de ruptura: Define puntos claros donde el diseño debe cambiar, esto facilitará la implementación de estilos responsivos.
Mantén el CSS limpio: Organiza tus Media Queries de manera que sean fáciles de leer y mantener.
Realiza pruebas: Siempre prueba tu diseño en diferentes dispositivos y navegadores para asegurarte de que se vea bien en todos ellos.

Conclusiones

Las Media Queries son una herramienta esencial para el diseño web responsivo. Con su ayuda, puedes ofrecer una experiencia de usuario óptima en diferentes dispositivos, asegurando que tu sitio web no solo se vea bien, sino que funcione perfectamente en cualquier pantalla. A medida que continúes tu aprendizaje en HTML5 y CSS3, recuerda la importancia de la adaptabilidad en un mundo cada vez más móvil.

blog.vermiip.es

Curso de HTML5 y CSS3: Responsive – Media Queries