Diseño web responsive,¿Cómo usar @media queries?

El diseño web responsive es una técnica que permite que una página web se adapte a diferentes tamaños de pantalla, desde ordenadores de sobremesa y portátiles hasta tablets y smartphones. Para ello, se utilizan las consultas de medios (media queries) en CSS3.

Tabla de contenidos

• Sintaxis de las consultas de medios
• Ocultar un elemento en pantallas pequeñas
• Cambiar el tamaño de un elemento en pantallas grandes
• Cambiar el diseño de la página en función de la orientación de la pantalla
• Optimización para SEO
• Conclusión

Una consulta de medios es una regla CSS que se aplica solo si se cumple una determinada condición. Por ejemplo, podemos usar una consulta de medios para ocultar un elemento de la pantalla cuando el ancho de la ventana del navegador es inferior a 600 píxeles.

Sintaxis de las consultas de medios

La sintaxis de las consultas de medios es la siguiente:

@media [tipo de medio] {
    reglas CSS
}

El tipo de medio es una cadena que indica el tipo de dispositivo al que se aplica la consulta. Los tipos de medio más comunes son:

• screen: Pantallas de ordenador, tablets y smartphones.
• print: Impresión.
• speech: Dispositivos de lectura de pantalla.

Expresiones de características de medios

Las consultas de medios también pueden utilizar expresiones de características de medios para comprobar el valor de una propiedad de medios. Las expresiones de características de medios se colocan entre paréntesis y se separan por comas.

Algunos ejemplos de expresiones de características de medios son:

• width: Ancho de la ventana del navegador.
• height: Altura de la ventana del navegador.
• orientation: Orientación de la pantalla.

Operadores lógicos

Se pueden utilizar operadores lógicos para combinar consultas de medios. Los operadores lógicos más comunes son:

• and: Ambas consultas deben ser verdaderas.
• or: Al menos una de las consultas debe ser verdadera.
• not: La consulta debe ser falsa.

Ejemplos de uso

A continuación, se muestran algunos ejemplos de uso de las consultas de medios:

Ocultar un elemento en pantallas pequeñas

@media screen and (max-width: 600px) {
    .elemento-a-ocultar {
        display: none;
    }
}

Este código oculta el elemento con la clase .elemento-a-ocultar cuando el ancho de la ventana del navegador es inferior a 600 píxeles.

Cambiar el tamaño de un elemento en pantallas grandes

@media screen and (min-width: 1200px) {
    .elemento-a-ampliar {
        width: 50%;
    }
}

Este código cambia el ancho del elemento con la clase .elemento-a-ampliar al 50% cuando el ancho de la ventana del navegador es superior a 1200 píxeles.

Cambiar el diseño de la página en función de la orientación de la pantalla

@media screen and (orientation: landscape) {
    .elemento-a-cambiar-en-horizontal {
        width: 100%;
        height: auto;
    }
}

Este código cambia el ancho y el alto del elemento con la clase .elemento-a-cambiar-en-horizontal cuando la pantalla está en orientación horizontal.

Optimización para SEO

Para optimizar un artículo de diseño web responsive para SEO, es importante utilizar las consultas de medios de forma adecuada. En concreto, se deben tener en cuenta los siguientes aspectos:

• Utilizar consultas de medios específicas: No se deben utilizar consultas de medios demasiado generales, ya que esto puede provocar que el contenido de la página se muestre de forma incorrecta en algunos dispositivos.
• Etiquetar correctamente los elementos: Los elementos que se van a ocultar o cambiar en función del tamaño de la pantalla deben etiquetarse de forma adecuada. Esto ayudará a los motores de búsqueda a entender cómo se debe mostrar el contenido de la página en diferentes dispositivos.
• Probar el diseño en diferentes dispositivos: Es importante probar el diseño de la página en diferentes dispositivos para asegurarse de que se muestra correctamente.

Conclusión

Las consultas de medios son una herramienta esencial para crear un diseño web responsive. Con un uso adecuado, se pueden crear páginas web que se adapten a diferentes tamaños de pantalla y que proporcionen una experiencia de usuario óptima en cualquier dispositivo.