» » Media query

Media query

En desarrollo web, Media Queries es un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo como la resolución de pantalla (por ejemplo, un smartphone frente a pantallas de alta definición) o la presencia de características de accesibilidad como el braille. Se convirtió en un estándar recomendado por la W3C en Junio del 2012. y es un principio básico de la tecnología de Diseño web adaptativo.
 

Historia de los Media Queries


Media queries se esbozó por primera vez en la propuesta inicial de CSS de Håkon Wium Lie en 1994, pero no se convirtió en parte de CSS. La recomendación HTML4 de 1997 muestra un ejemplo de como podría agregarse en el futuro. En el 2000, la W3C comenzó a trabajar en los Media Queries y también en otro esquema para el soporte de varios dispositivos: CC/PP. Las 2 acciones estaban orientadas al mismo problema, pero CC/PP es centrado en el servidor, mientras los Media Queries están centrados en el cliente. El primer borrador publico para Medias Queries fue publicado en 2001 y la especificación se convirtió en una recomendación de la W3C en 2012 después que los navegadores le dieran soporte.


Usando los Media Queries


Un media query consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media type especificado en el media query coincide con el tipo de dispositivo sobre el que el documento está siendo mostrado y todas las expresiones del media query son verdaderas. Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas de estilo, siguiendo las reglas normales en cascada.

Esto es un simple ejemplo:

 @media screen and (min-width:500px) { ... }

Media Types


Un media type puede ser declarado en la cabecera de un documento HTML usando el atributo "media" dentro de un elemento <link>. El valor específico del atributo "media" indica en que dispositivo el documento vinculado será mostrado. Media types también pueden ser declarados dentro de instrucciones de procesamiento XML, el @import at-rule, y el @media at-rule. CSS2 definen los siguientes media types:

braille
embossed
handheld
print
projection
screen
speech
tty
tv
El media type "all" también puede ser usado para indicar que las hojas de estilo apliquen todos los media types.


Atributos Media


La siguiente tabla contiene los atributos media recogidos de la última recomendación de la W3C para media queries, el 6 de junio de 2007.
AtributoValorMin/Max
colorintegersi
color-indexintegersi
device-aspect-ratiointeger/integersi
device-heightlengthsi
device-widthlengthsi
gridintegerno
heightlengthsi
monochromeintegersi
resolutionresolution ("dpi" or "dpcm")si
scan"progressive" or "interlaced"no
widthlengthsi

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Cómo publicar videos más largos en tus historias de Instagram

Cómo publicar videos más largos en tus historias de Instagram

Si a veces subes videos a tus historias de Instagram , probablemente te has topado con el límite de 15 segundos. Eso significa que no importa la duración del video que publiques en tu historia, Instagram lo recortará automáticamente a una duración máxima de 15 segundos. Esto es ideal para videos...
Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...