PDF de programación - CSS Media Queries

1

CSS Media Queries

Los Media Queries (“consultas de medios”) vienen a ser condicionales dentro de nuestra hoja de
estilos CSS, en cualquier lenguaje de programación lo representaríamos con un IF.
Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de
estilo utilizando características del medio como ancho, alto y color. Añadido en CSS3, las media
queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de
salida sin tener que cambiar el contenido en sí.
Sintaxis
Las Media queries consisten de un media type y una o mas expresiones, implicando características
del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el
tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo
mostrado y todas las expresiones en el media query son verdaderas.

<!-- CSS media query en un elemento link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query sin hojas de estilos externas style sheet -->
<style>
@media (max-width: 600px) {

.facet_sidebar {

display: none;
}

} </style>
Cuando una media query es verdadera, la hoja de estilo correspondiente o reglas de estilos son
aplicadas, siguiendo las reglas normales de cascada.
Cuando not ni only son usadas dentro de una query, el tipo de medio es opcional y será
interpretada como all.
Operadores Lógicos
Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.
Además se puede combinar múltiples queries en una lista separada por comas múltiples; si
cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es
equivalente a una operación lógica "or".
and
El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico
con el tipo de medio especificado como all puede lucir así:

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



2

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:

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

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

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

Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o más y la
pantalla esta en formato horizontal.
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:

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

Por lo tanto, si esta en una screen con una ventana de 800px de ancho, la declaración del medio
retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media
all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la
pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si
estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría
pero la segunda parte retornara verdadero debido a la declaración de medio.
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:

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

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

@media not (all and (monochrome)) { …



3

... y no de esta forma:

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

Otro Ejemplo:

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

Es evaluado de la siguiente forma:

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

only
El operador only previene que navegadores antiguos que no soportan queries con funciones
apliquen los estilos asignados:
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />
Funciones Multimedia
La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar
"greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y
">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia
sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.
color
Valor: <color>
Medio: visual
Acepta prefijos min/max: si

Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no
soporta colores, este valor es 0.
Nota: Si el componente de color tiene diferente numero de bits por color, entonces el valor mas
pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el
verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color
se usara el mínimo valor de bits por color en la tabla.
Ejemplos
Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:

@media all and (color) { ... }

Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:

@media all and (min-color: 4) { ... }

aspect-ratio



4

Valor: <ratio>
Medio: visual, tactile Acepta prefijos min/max: si
Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros
positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles
horizontales (primer termino) a los pixeles verticales (segundo termino).
Ejemplo
Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño
de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.

@media screen and (min-aspect-ratio: 1/1) { ... }

Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este
estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.
device-aspect-ratio
Valor: <ratio>
Medio: visual, tactile Acepta prefijos min/max: si
Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros
positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles
horizontales (primer termino) a los pixeles verticales (segundo termino).
Ejemplo
Lo siguiente selecciona una hoja de estilo especial para ser aplicada en pantallas widescreen.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio:
16/10) { ... }

Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.
device-height
Valor: <length>
Medio: visual, tactile Acepta prefijos min/max: si
Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área
del documento a renderizar).
device-width
Valor: <length>
Medio: visual, tactile Acepta prefijos min/max: yes
Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área
del documento a renderizar).

Ejemplo



5

Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos
800px de ancho, usted puede usar esto:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

height
Valor: <length>
Medio: visual, tactile Acepta prefijos min/max: yes
La función height describe la altura de la superficie a renderizar en el dispositivo de salida
(como la altura de una ventana o la bandeja de papel en una impresora).
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de
estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
orientation
Valor: landscape | portrait Medio: visual
Acepta prefijos min/max: no

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).
Ejemplo
Para aplicar una hoja de estilo solo en orientación vertical (portrait):

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

width
Valor: <length>
Medio: visual, tactile Acepta prefijos min/max: yes
La función width describe el ancho de la superficie a renderizar en el dispositivo de salida (como
el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de
estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
Ejemplos
Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de
al menos 20em, usted puede usar esta query:

@media