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

4
102813

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:

/* Para 960px */  
@media only screen and (max-width: 980px) and (min-width: 821px) {  
  
}  
  
/* Para 800px */  
@media only screen and (max-width: 820px) and (min-width: 621px) {  
  
}  
  
/* Para 600px */  
@media only screen and (max-width: 620px) and (min-width: 501px) {  
  
}  
  
/* Para 480px */  
@media only screen and (max-width: 500px) and (min-width: 341px) {  
  
}  
  
/* Para 320px */  
@media only screen and (max-width: 340px) and (min-width: 5px)  {  
  
} 

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

@media screen {  
  * { font-family: times }  
} 

impresora.css

@media print {  
  * { font-family: arial }  
}  

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:

@media screen and (min-width: 400px) and (max-width: 700px) {   
body{  
background-color:#555;  
font-family: Times New Roman;  
}  
header h3{  
        text-align:center;  
    }  
 } 

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:

@media screen and (min-width: 400px) and (max-width: 700px) {   
body{  
background-color:#555;  
font-family: Times New Roman;  
}  
header h3{  
        text-align:center;  
    }  
 } 

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.

@media screen and (device-width: 800px) { /*Reglas CSS*/ } 

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.

@media screen and (device-height: 600px) { /*Reglas CSS*/ } 

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:

@media all and (orientation:portrait) { /*Reglas CSS*/ }  
@media all and (orientation:landscape) { /*Reglas CSS*/ } 

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

/* Smartphones (portrait and landscape) ----------- */  
@media only screen  
and (min-width : 320px)  
and (max-width : 480px) {  
/* Styles */  
}  
/* Smartphones (landscape) ----------- */  
@media only screen  
and (min-width : 321px) {  
/* Styles */  
}  
/* Smartphones (portrait) ----------- */  
@media only screen  
and (max-width : 320px) {  
/* Styles */  
}  
/* iPads (portrait and landscape) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px) {  
/* Styles */  
}  
/* iPads (landscape) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px)  
and (orientation : landscape) {  
/* Styles */  
}  
/* iPads (portrait) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px)  
and (orientation : portrait) {  
/* Styles */  
}  
/* Desktops and laptops ----------- */  
@media only screen  
and (min-width : 1224px) {  
/* Styles */  
}  
/* Large screens ----------- */  
@media only screen  
and (min-width : 1824px) {  
/* Styles */  
}  
/* iPhone 4 ----------- */  
@media  
only screen and (-webkit-min-device-pixel-ratio : 1.5),  
only screen and (min-device-pixel-ratio : 1.5) {  
/* Styles */  
} 

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

4 COMENTARIOS

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad