CSS media Queries

Las consulta por los medios es un mecanismos CSS que nos permite definir el diseño de nuestras aplicaciones web a partir de:

  • El tipo de dispositivo(smarthphone, TV, Tableta, Desktop, proyector, impresora, etc)
  • La resolución de pantalla (ancho width, alto heigth).
  • La inclinación de la pantalla (horizontal, vertical).

Presenter Notes

Medios.

Una de las características más importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, móviles, proyectores, etc.

Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio. La siguiente tabla muestra el nombre que CSS utiliza para identificar cada medio y su descripción:

Presenter Notes

Medios tabla:

Medio Descripción
all Todos los medios definidos
braille Dispositivos táctiles que emplean el sistema braille
embosed Impresoras braille
handheld Dispositivos de mano: móviles, PDA, etc.
print Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection Proyectores y dispositivos para presentaciones
screen Pantallas de ordenador
speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty Dispositivos textuales limitados como teletipos y terminales de texto
tv Televisores y dispositivos con resolución baja

Presenter Notes

Medios:

Los medios más utilizados actualmente son screen (para definir el aspecto de la página en pantalla) y print (para definir el aspecto de la página cuando se imprime), seguidos de handheld (que define el aspecto de la página cuando se visualiza mediante un dispositivo móvil).

Además, CSS clasifica a los medios en diferentes grupos según sus características. La siguiente tabla resume todos los grupos definidos en el estándar:

Presenter Notes

Medios:

Medio Continuo / Paginado Visual / Auditivo / Táctil / Vocal Mapa de bits / Caracteres Interactivo / Estático
braille continuo táctil caracteres ambos
embossed paginado táctil caracteres estático
handheld ambos visual, auditivo, vocal ambos ambos
print paginado visual mapa de bits estático
projection paginado visual mapa de bits interactivo
screen continuo visual, auditivo mapa de bits ambos
speech continuo vocal (no tiene sentido) ambos
tty continuo visual caracteres ambos
tv ambos visual, auditivo mapa de bits ambos

Presenter Notes

Medios definidos con las reglas de tipo @media

Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma directa el medio o medios en los que se aplicarán los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de @media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas.

A continuación se muestra un ejemplo sencillo:

1 @media print {
2   body { font-size: 10pt }
3 }
4 @media screen {
5   body { font-size: 13px }
6 }
7 @media screen, print {
8   body { line-height: 1.2 }
9 }

Presenter Notes

Operadores Lógicos

1 @media (min-width: 700px) { ... }

Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena

1 @media (min-width: 700px) and (orientation: landscape) { ... }

La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:

1 @media tv and (min-width: 700px) and (orientation: landscape) { ... }

Presenter Notes

lista separada por comas

Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:

1 @media (min-width: 700px), handheld and (orientation: landscape) { ... }

Presenter Notes

not

El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:

1 @media not all and (monochrome) { ... }

Esto significa que el query es evaluado de la siguiente forma:

1 @media not (all and (monochrome)) { ... }

... y no de esta forma:

1 @media (not all) and (monochrome) { ... }

Presenter Notes

not

Otro Ejemplo:

1 @media not screen and (color), print and (color)

Es evaluado de la siguiente forma:

1 @media (not (screen and (color))), print and (color)

Presenter Notes

detección del tipo de dispositivo

Presenter Notes

Detección de la orientación de la pantalla:

orientation: Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).

1 /* Formato Vertical */
2 @media screen and (orientation:portrait) {
3     /* Portrait styles */
4 }
5 /* Formato Horizontal */
6 @media screen and (orientation:landscape) {
7     /* Landscape styles */
8 }

Para aplicar una hoja de estilo solo en orientación vertical (portrait):

1 @media all and (orientation: portrait) { ... }

Presenter Notes

Ejemplo:

Observe el siguiente documento:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>Ejemplo Media Queries</title>
 6     <link rel="stylesheet" href="ejemplo-media-queries.css">
 7 </head>
 8 <body>
 9     <h1>¿Y mis $50,00?</h1>
10     <img src="http://i.ytimg.com/vi/IwwpMNqBZQY/0.jpg" alt="imagen canaca"/>
11 </body>
12 </html>

Vamos ha definir el diseño de esta pagina a partir de algunos atributos que vamos a extraer de CSS3 please, como vemos a continuación.

Presenter Notes

CSS Ejemplo:

body {
    background: #4D4D4D;
    text-align:center
}

h1 {
    color: #FF5976;
    text-shadow: 1px 1px 3px RGBA(0,0,0,0.5);
}

img {
    border: 5px solid #00C669;
    border-radius: 10px;
    opacity: 0.5;
}
img:hover {
    opacity: 1;
}

Fuentes:

Recursos:

Presenter Notes