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