icono_twiter
José María Masip Díaz

Técnico en artes gráficas, experto en preimpresión y webmaster.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-10-11

Tutorial visitado 11.733 veces Descargar en PDF
Uso de CSS3 Media Queries

Uso de CSS3 Media Queries: consulta de Medios y responsive Design.

0. Índice de contenidos.

1. Introducción

En este tutorial vamos a ver cómo usar la propiedad media queries para poder personalizar los estilos CSS basándonos en las caracteristicas del dispositivo como, por ejemplo: tv, pc, tablet, movil o si esta horizontal (paisaje) o en vertical (retrato), etc; con ello y conociento los tamaños más comunes de dispositivos de salida:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

podemos crear selectores CSS de este tipo:

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Hp Pavilion dv7 Notebook PC (Intel Core 2 Duo a 2.26 GHz, 4 GB RAM, 450 GB HD).
  • Sistema operativo: Windows Home Premium.
  • Editor: Notepad++ v6.1.8.

3. Media Queries. Consulta de Medios.

El Html4 y CSS2 ya se soportaban hojas de estilo a medida para los siguientes tipos de medios (media types):

  • HTML4: ‘print’, ‘screen’,‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘tty’, ‘tv’.
  • CSS2: define la misma lista menos ‘aural’ y añade ‘embossed’ y ‘speech’. También, ‘all’ es usado para aplicar la hoja de estilo a todas las media types.

Ejemplo:

Dentro de una hoja de estilo CSS, se puede declarar que regla se aplica a cada medio (media types).

Ejemplos:

pantalla.css

impresora.css

En HTML5 y CSS3 aparecen las Medias Queries o consulta de Medios.

Una consulta de los medios (Media Queries) de comunicación consiste en una media type y cero o más expresiones que compruebe las condiciones de determinadas características de los Medios de comunicación (Media Features(.

He aquí un ejemplo simple escrito en HTML:

Aquí se expresa que una hoja de estilo "ejemplo.css" se aplica a los dispositivos de un determinado tipo de medio ' screen ' (pantalla) con una característica (que debe ser una pantalla de color).

4. Media Features. Algunas Funciones de Media.

Sintácticamente, las características de los medios de comunicación se parecen a las propiedades CSS: tienen nombres y aceptan ciertos valores. Hay, sin embargo, varias diferencias importantes entre las propiedades y características de los medios de comunicación:

  • Las propiedades son usadas en declaraciones para dar información sobre la forma de presentar un documento. Para las características de los medios se utilizan expresiones para describir los requisitos del dispositivo de salida.
  • La mayoría de las características de los medios aceptan el opcional ' min- 'o' max- '. Prefijos para expresar "mayor o igual que" y "menor o igual que" en las limitaciones.
  • Las propiedades requieren siempre un valor para formar una declaración. Las características de los medios, por otro lado, también se puede utilizar sin un valor. Las funciones de medios que llevan el prefijo min / max no se puede utilizar sin un valor. Sería una consulta (Media Queries) incorrecta.
  • Las propiedades pueden aceptar valores más complejos, por ejemplo, los cálculos que involucran a otros valores. Los medios de comunicación (Media features) solo aceptan valores individuales: una palabra clave, un número o un número con un identificador de la unidad. Las únicas excepciones de funciones de medios (Media features) son el ‘aspect-ratio’ y ‘device-aspect-ratio’.

4.1. width

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles.
Acepta los prefijos min / max.
Con ‘width’ media feature (función de medios) especificamos el ancho de la zona de visualización dirigido del dispositivo de salida.

Ejemplo:

Esta consulta de medios de comunicación (Media Queries) expresa que hoja de estilo se va a aplicar en dispositivos con ventana (la parte de la pantalla / papel donde se procesa el documento) con anchuras entre 400 y 700 píxeles y con las reglas CSS siguientes:

4.2. height

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles.
Acepta los prefijos min / max.
Con ‘height’ media feature (función de medios) especificamos el alto de la zona de visualización dirigido del dispositivo de salida.

Ejemplo:

Esta consulta de medios de comunicación (Media Queries) expresa que hoja de estilo se va a aplicar en dispositivos con ventana (la parte de la pantalla / papel donde se procesa el documento) con anchuras entre 400 y 700 píxeles y con las reglas CSS siguientes:

4.3. device-width

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles.
Acepta los prefijos min / max.
Con ‘width’ media feature (función de medios) especificamos el ancho de la superficie de representación del dispositivo de salida.

Ejemplo:

Esta Media Queries dice que reglas css se aplican a dispositivos con un ancho de 800px.

4.4. device-height

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles.
Acepta los prefijos min / max.
Con ‘height’ media feature (función de medios) especificamos el alto de la superficie de representación del dispositivo de salida.

Ejemplo:

Esta Media Queries dice que reglas css se aplican a dispositivos con un alto de 600px.

4.5. orientation

Valores: portrait | landscape
No acepta los prefijos min / max.

El valor de "orientation" es ‘portrait’ (retrato) cuando el valor de la altura del medio de salida es mayor o igual al valor de la anchura de ese medio.
De lo contrario el valor es ‘landscape’ (paisaje).

Ejemplo:

4.6. Resto de funciones

Quedan algunas funciones mas que podeis consultar en el apartado 5. Referencias

  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid
Ejemplos de dispositivos de salida

6. Ejemplo Media Queries.

En este ejemplo veremos como según adaptamos la ventana del navegador (como ejemplo de cada ancho de dispositivo de salida) van cambiando los estilos de los distintos elementos.

EjemploMediaQueries.html

6. Referencias.

7. Conclusión.

Usando CSS Media Queries podemos definir como se vera nuestra web en los diferentes dispositivos modificando el Estilo CSS en los distintos Tamaños Media Queries.

Un saludo.

Chema

mailto:chmadi@gmail.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: