Responsive Web (CSS media queries)

Imagen

Hoy en día nuestros sitio web son visitados constantemente por distinto dispositivos móviles, smart tv, tablets, netbooks, notebooks y computadores desktop.

Cada uno de ellos tienen ciertas singularidades que lo diferencian de los otros pero principalmente lo que en ellos marca la diferencia es el layout o dimensiones visuales del dispositivo.

Imagen

Si deseamos que nuestro sitio web se adapte visualmente a cada uno de los distintos dispositivos tenemos a nuestra disposición las Media Queries (CSS).

Noten el realce que le di a la palabra adaptación visual y no confundir con compatible que es otra cosa.

¿Que son las Media Queries?

Las media queries, son una tecnología inserta en el lado del cliente (navegador), permite evaluar ciertas condiciones y sobre el resultado tomar ciertas desiciones.

¿Y para que me sirve esto?

Quizás te estés preguntando, y la respuesta es muy simple: Para discriminar que medios cargo dependiendo de las dimensiones visuales del dispositivo visitante.

Por ejemplo : Podriamos cargar un css distinto si nos visita un movil ó un tablet, y satisfacer las necesidades visuales de cada uno de estos dispositivos.

¿Como funciona esto?

  • Toda media querie comienza asi @media
  • Después le indicamos un Media type para nosotros screen
  • Posteriormente utilizamos el condicional and
  • y para terminar definiendo el Media feature o condicion

En resumen:

importando media queries

@import url(mis_estilos.css) only screen and(max-width:600px);

media queries link

media queries en las reglas de css

@media screen and (max-width:800px){ #contenedor{ width:100%; margin:auto; } }

Cualquiera de estas 3 formar podemos usar para escribir nuestras reglas, pero lo importante acá es la regla (max-width:600px), esto indica que solo se tomara en cuenta estas reglas cuando el tamaño de visualización del dispositivo visitante sea menor a 600px

Si deseamos conocer mas acerca de las media queries visita las Media Queries - W3C Recommendation

Las media features pueden tener estos valores

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Nota : No confundir media queries como compatibilidad con dispositivos, media queries solo aborda aspectos visuales y no funcionales.

Espero les sirva y transformen sus sitios en sitios adaptables a cualquier dispositivo.