• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Diseño de página adaptable con consultas multimedia

Log in or subscribe for free to enjoy all this course has to offer!

¿Sabes sobre lo que están más preocupados los administradores que implementan el diseño de su página? La resolución de pantalla del visitante. Por supuesto: el espacio o número de píxeles varía ampliamente de una pantalla a otra.

Esta información es importante cuando creas un diseño: ¿cómo debería mostrarse tu página en resoluciones de pantalla diferentes? Si tienes una pantalla panorámica, puede que te olvides de que algunas personas navegan con pantallas pequeñas. Sin mencionar los navegadores de los teléfonos inteligentes, que son todavía menos anchos.

Aquí es donde aparecen las consultas multimedia. Estas son las reglas que deben aplicarse para cambiar el diseño de una página web según las características de la pantalla. Mediante esta técnica, ¡puedes crear un diseño que se ajuste automáticamente a la pantalla de cada usuario!

Implementación de consultas multimedia

Las consultas multimedia son parte de las nuevas características de CSS3. No son nuevas propiedades, sino más bien reglas que pueden aplicarse en determinadas condiciones. En concreto, serás capaz de decir: «Si la resolución de pantalla del visitante es menor que tal valor, entonces aplica las siguientes propiedades de CSS». Esto te permite cambiar el aspecto de la página web en determinadas condiciones: Puedes incrementar el tamaño del texto, cambiar el color de fondo, cambiar la posición del menú en determinadas resoluciones, etc.
Al contrario de lo que se podría pensar, las consultas multimedia no se limitan solo a las resoluciones de pantalla. Puedes cambiar el aspecto de la página según otros criterios, como el tipo de pantalla (teléfono inteligente, TV, proyector, etc.), el número de colores, la orientación de la pantalla (vertical u horizontal), etc. ¡Hay un montón de posibilidades!

Aplicar una consulta multimedia

Por lo tanto, las consultas multimedia son reglas que especifican cuándo tienen que aplicarse las propiedades CSS. Hay dos formas de usarlas:

  • cargando una hoja de estilo.csssegún la regla (por ejemplo: «Si la resolución es menor que 1280 px de ancho, carga el archivoresoluciones_peques.css»);

  • escribiendo la regla directamente en el archivo.csshabitual (por ejemplo: «Si la resolución es menor que 1280 px de ancho, carga las siguientes propiedades CSS»).

Cargar una hoja de estilo diferente

¿Recuerdas la etiqueta<link />que, en nuestro código HTML, cargaba un archivo.css?

<link rel="stylesheet" href="estilo.css" ></code>

Puedes añadir un atributomedia, en el que vamos a escribir la regla que debe aplicarse al archivo que se tiene que cargar. Esto se conoce como hacer una consulta multimedia. Por ejemplo:

<link rel="stylesheet" media="screen and (max-width: 1280px)" href="resoluciones_peques.css" ></code>

Al final, tu código HTML puede incluir varios archivos CSS: uno por defecto (que se carga en todos los casos) y uno o dos más que solo se cargan si se aplican las reglas correspondientes.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="estilo.css" /> <!-- Para todos -->
        <link rel="stylesheet" media="screen and (max-width: 1280px)" href="resoluciones_peques.css" /> <!-- Para los que tengan una resolución menor a 1280 px -->
        <title>Consultas multimedia</title>
    </head>
Cargar reglas directamente en la hoja de estilo

Otra técnica, que personalmente prefiero por razones prácticas, es escribir estas reglas en el mismo archivo CSS como habitualmente.
En este caso, escribimos la regla en el archivocssde la siguiente manera:

@media screen and (max-width: 1280px)
{
    /* Escribe aquí tus propiedades en CSS */
}

Las reglas disponibles

Hay muchas reglas para crear consultas multimedia. Tan solo mencionaré aquí las principales:

  • color: gestión de color (en bits/píxel).

  • height: muestra la altura del campo (ventana).

  • width: muestra el ancho del campo (ventana).

  • device-height: altura del dispositivo.

  • device-width: ancho del dispositivo.

  • orientation: orientación del dispositivo (vertical u horizontal).

  • media: tipo de pantalla de salida. Algunos posibles valores:

    • screen: pantalla «normal»;

    • handheld: dispositivo móvil;

    • print: imprimir;

    • tv: televisión;

    • projection: proyector;

    • all: todo tipo de pantallas.

Las reglas se pueden combinar con estas palabras:

  • only: «solo»;

  • and: «y»;

  • not: «no»;

Aquí van algunos ejemplos de consultas multimedia para ayudarte a comprender el principio.

/* En pantallas con un ancho de ventana máximo de 1280 px */
@media screen and (max-width: 1280px)

/* En todo tipo de pantallas con un ancho de ventana entre 1024 px y 1280 px */
@media all and (min-width: 1024px) and (max-width: 1280px)

/* En televisiones */
@media tv

/* En todas los tipos de pantalla orientadas verticalmente */
@media all and (orientation: portrait)

Probando consultas multimedia

Las consultas multimedia se utilizan principalmente para adaptar el diseño de la página web a diferentes anchos de pantalla.

Hagamos una prueba muy simple: vamos a cambiar el tamaño del texto y el color si la ventana es mayor o menor que 1024 píxeles de ancho. Para esta prueba, voy a usar el segundo método: escribir la regla directamente en el mismo archivo.csscomo de costumbre:

/* Párrafos azul por defecto */
p
{
    color: blue;
}

/* Nuevas reglas si la ventana es más ancha de 1024px */
 @media screen and (max-width: 1024px)
{
    p
    {
        color: red; 
        background-color: black;
        font-size: 1.2em;
    }
}

En nuestro CSS, primero pedimos que el texto del párrafo se escriba en azul. Hasta aquí nada nuevo. Sin embargo, hemos añadido una media query que se aplica a todas las pantallas cuya anchura no supere los 1024px. En el interior, hemos aplicado las reglas CSS a los párrafos para escribirlos más grandes y en rojo.

Resultado: ¡el aspecto de la página varía según el tamaño de la ventana (figura de abajo)!

El aspecto de la página varía según el tamaño de la ventana

Uso práctico de las media queries en el diseño

Cambiar el color del texto es agradable, pero en realidad no añade gran cosa. Sin embargo, utilizar media queries para cambiar el aspecto de tu sitio web dependiendo de la resolución de la pantalla resulta en seguida mucho más útil. ¡Verás que puedes hacer lo que quieras!

En este ejemplo, sugiero que vuelvas a utilizar el diseño que creamos para el sitio web de Zozor (figura siguiente).

El sitio web creado durante el ejemplo práctico
El sitio web creado durante el ejemplo práctico

Aunque el sitio web es adecuado para la mayoría de las resoluciones de pantalla, tienes que "desplazarlo" hacia la derecha para ver la página completa cuando la pantalla sea de menos de 1024 px. El sitio web no es muy cómodo de ver en una pantalla pequeña.

Sugiero que utilices media queries para cambiar el aspecto del sitio web en el caso de resoluciones de menos de 1024 px de ancho. Vamos a hacer los siguientes cambios:

  • el menú de navegación de la parte superior derecha se organizará a lo alto en lugar de a lo ancho y los enlaces se escribirán en caracteres más pequeños;

  • el banner con el puente de San Francisco (el Golden Gate) se borrará porque ocupa mucho espacio y no proporciona demasiada información;

  • el bloque "Acerca del autor"<aside>se colocará debajo del artículo (en lugar de al lado) y se reorganizará su contenido, (la foto de Zozor estará en posición flotante).

Sin duda podrías hacer muchos otros cambios: cambiar el color, la disposición del pie de página, etc. Pero esto ya es más que suficiente para tener un poco de práctica con las media queries.

Vamos a trabajar directamente en el archivostyle.cssque creamos durante el ejemplo práctico y añadir unas cuantas instrucciones media queries para ajustar el diseño. Te sugiero que descargues los archivos del ejemplo práctico si todavía no lo has hecho.

Descargar el ejemplo práctico

La página

El ancho de la página está actualmente establecido en 900 px y el contenido está centrado:

#main_wrapper
{
    width: 900px;
    margin: auto;
}

Te sugiero que añadas la siguiente regla de media query tras estas líneas:

@media all and (max-width: 1024px)
{
    #main_wrapper
    {
        width: auto;
    }
}

Esta regla significa: "si el ancho de la ventana no supera los 1024 px, ejecuta las siguientes reglas CSS para todos los tipos de pantalla".

Las reglas CSS en cuestión son muy sencillas; en realidad, solo hay una regla: el ancho de la página se ajusta automáticamente (en lugar de dar un ancho fijo de 900 píxeles). La página ocupará entonces todo el espacio disponible de la ventana. Esto evita la aparición de barras de desplazamiento horizontal con resoluciones bajas.

El menú de navegación

Queremos que el menú de navegación ocupe menos espacio en pantallas de menos resolución. En lugar de darle un tamaño fijo, vamos a restaurar su tamaño original flexible y automático. Cada elemento del menú se escribe debajo del anterior; por ello, vamos a convertir las viñetas en etiquetas deblocken lugar deinline-block.

Por último, el texto se escribirá más pequeño y se eliminará el borde de la parte inferior de los enlaces cuando se sitúe encima el puntero, ya que es menos adecuado con una disposición de pantalla como esta.

@media all and (max-width: 1024px)
{
    nav
    {
        width: auto;
        text-align: right;
    }
    
    nav li
    {
        display: block;
        padding-left: 4px;
    }
    
    nav a
    {
        font-size: 1.1em;
    }
    
    nav a:hover
    {
        border-bottom: 0;
    }
}

El banner

Para eliminar el banner no hay nada más sencillo: utilizamos la propiedaddisplayasignándola con el valornone. Si la ventana es demasiado pequeña, puede ser preferible ocultar el banner completamente:

@media all and (max-width: 1024px)
{
    #banner_image
    {
        display: none;
    }
}

El bloque "Acerca del autor"

En lugar de colocar este bloque a la derecha del artículo, vamos a colocarlo debajo. Esta disposición "de arriba hacia abajo" es más adecuada para pantallas pequeñas.

Reajustaremos ligeramente la posición de los elementos dentro del bloque, en particular, la foto de Zozor se colocará en posición flotante a la derecha.

@media all and (max-width: 1024px)
{
    article, aside
    {
        width: auto;
        display: block;
        margin-bottom: 15px;
    }
    
    #arrow
    {
        display: none;
    }
    
    #zozor_picture img
    {
        width: 110px;
        float: right;
        margin-left: 15px;
    }
    
    aside p:last-child
    {
        text-align: center;
    }
}

¿Qué significaaside p:last-child?

Es un selector avanzado que aún no hemos usado.aside pquiere decir "Todos los párrafos dentro de la etiqueta<aside>".:last-childafecta solo al último párrafo del bloqueaside(que contiene los enlaces a Facebook y Twitter), para centrar las imágenes. Evidentemente, podrías haber asignado unclasso unida este párrafo para abordarlo directamente, pero no quería cambiar el código HTML.

El resultado

Ahora la página se reorganizará totalmente cuando la ventana sea de 1024 px de ancho o menos. Puedes ver los resultados en la siguiente figura, ¡que habla por sí misma!

El mismo sitio web, mostrado de manera diferente según la anchura de la pantalla

El mismo sitio web, mostrado de manera diferente según la anchura de la pantalla

Media queries y navegadores móviles

Como probablemente sabes, las pantallas de los smartphone son mucho más estrechas que las pantallas de nuestros ordenadores habituales (solo tienen unos cientos de píxeles de ancho). Para adaptarse a esto, los navegadores móviles muestran la página web "ampliándola" para poder ver toda la página. El área de visualización simulada se llama viewport, que es el ancho de la ventana del navegador del teléfono móvil.

Con media queries, si en CSS aplicas a la pantalla de un móvilmax-width, comparará el ancho que especifiques con el de su viewport. ¡El problema es que el viewport cambia según el navegador móvil utilizado!

Navegador

Ancho predeterminado del viewport

Opera Mobile

850 píxeles

iPhone Safari

980 píxeles

Android

800 píxeles

Windows Phone 7

1024 píxeles

Un iPhone se comporta como si la ventana tuviera 980 px de ancho, mientras que un Android se comporta como si la ventana fuera de 800 px de ancho.

Para los smartphones, puede se más conveniente, en lugar de usarmax-width, utilizarmax-device-width: este es el ancho del dispositivo. Los dispositivos móviles no tienen más de 480 px de ancho, por lo que podemos dirigirnos solo a los navegadores móviles con esta media query:

@media all and (max-device-width: 480px)
{
    /* Tus reglas CSS para tus teléfonos móviles aquí */
}

¿Por qué no aplicar en los teléfonos móviles la normahandheld?

Veo que me sigues, ¡muy bien! Efectivamente, en teoría podemos aplicar en los teléfonos móviles la regla mediahandheld... Por desgracia, ningún navegador móvil excepto Opera reconocehandheld. Todos se comportan como si tuvieran pantallas normales (screen). Así que no puedes utilizarhandhelden los teléfonos móviles.

Puedes cambiar el ancho del viewport del navegador móvil con una etiquetametaque ha de insertarse en el encabezado del documento (<head>):

<meta name="viewport" content="width=320" ></code>

Puedes usar esta etiqueta para cambiar la manera en que se organiza el contenido de tu página en los teléfonos móviles. Para obtener una imagen legible sin zoom, puedes ajustar el viewport a la misma anchura que la pantalla:

<meta name="viewport" content="width=device-width" ></code>

En resumen

  • Las media queries permiten cargar varios estilos CSS basados en ciertos ajustes.

  • Hay un gran número de ajustes que permiten las media queries: número de colores, resolución de pantalla, orientación, etc. En la práctica, se utilizan sobre todo para cambiar el aspecto de la página web en diferentes resoluciones de pantalla.

  • Creas una media query con la directiva@mediaseguida del tipo de pantalla y una o más condiciones (como el ancho máximo de pantalla). El siguiente estilo CSS se activará solo si se cumplen las condiciones.

  • Los navegadores móviles simulan un ancho de pantalla que se llama el viewport.

  • Con los smartphones puede aplicarse una regla basada en el número real de píxeles que se muestran en la pantalla:max-device-width.

Example of certificate of achievement
Example of certificate of achievement