Inicia sesión




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

Te sugiero seguir leyendo...



  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2016-12-18
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 XML WebSite webmasters Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Carga lenta de imágenes

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-19
  • Categorias: Diseño Web html5 javascript WebSite webmasters Noticias Tutorial

Aumente su ranking en los motores de búsquedas con SEO

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-19
  • Categorias: Google WebSite SEO SEM Noticias Tutorial

Herramientas para generar palabras claves

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-19
  • Categorias: Google webmasters SEO SEM Internet Herramientas Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial