Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017 ·

Qué es una media querie (media query)

"Responsive Design" (Diseño Sensible) es la estrategia para hacer que un sitio "responda" al navegador según dispositivo en el que se muestra... haciendo que se vea bien pase lo que pase. Las media queries son la herramienta más poderosa para hacer esto.

Una media query consiste en un "tipo de medio" y una o más expresiones que realizan al menos una consulta que limita las reglas de estilo que se van a aplicar a la página web (dependiendo de las características del medio como ancho, alto y color). Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a las características del dispositivo. 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í.

Cuando una media query es verdadera, la hoja de estilo correspondiente o reglas de estilos son aplicadas, siguiendo las reglas normales de cascada de las hojas de estilo.

Puedes encontrar más información en este artículo de MDN (Mozilla Developer Network).

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".

El operador and es usado para colocar juntas múltiples funciones multimedia.

En este ejemplo las reglas contenidas dentro de la media query sólo se aplican a dispositivos con pantalla superior a 768px.


@media all and (min-width: 768px) {
    main { 
      max-width: 1000px;
      background: rgba(0,0,255,0.1);    
    }
    section {
      float: left;
      width: 66%;
      margin-right: 1%;
    }
    article {
      float: left;
      width: 50%;
    }
    aside {
      float: left;
      width: 33%;
    }
    section, aside { min-height: 25vh; }
}

Etiquetas: Teoría, CSS3

Imprimir

En línea...

Hay 24 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png5.png5.png9.png0.png
Hoy ........32
Ayer .......16
Mes ........348

Domingo, 25 Junio 2017