Media Query, Tu web adaptable

ya habíamos hablado anteriormente sobre la técnica responsive layout para hacer que nuestra web se adapte a dispositivos móviles sin necesidad de tener dos o tres versiones de la misma, hoy comentaremos algo de código css3 para dar formatos independientes del dispositivo.

Media Query.
Es una técnica moderna que utiliza css3 para dar estilos condicionados de nuestra página al dispositivo en el que visualiza.
En realidad la técnica es bastante simple en comparación con otras y las ganancias estéticas muy buenas.

importamos el estilo con el atributo media="screen", de esta manera:

<link type="text/css" rel="stylesheet" href="estilos/estilo1.css" media="screen"/>

luego en el css establecemos un estilo por defaulf

.contenido {
 background-image: url("img/fondo2.png");
 margin:2% 10% 2% 10%;
 padding: 2% 2% 2% 2%; 
 font-size:18px;
}

   

y establecemos los estilos condicionados al ancho de la pantalla, de modo que si al ancho cae bajo el tamaño establecido entonces se aplicará el estilo:

@media screen and (max-width: 800px) {
    .contenido {    
        margin: 2% 7% 2% 7%;
        padding: 1% 1% 1% 1%;
        font-size: 15px;
    }
    h1 {
        font-size: 16px;
    }
    
}
@media screen and (max-width: 480px) {
    .contenido { 
  margin: 1% 1% 1% 1%;
  padding: 1% 1% 1% 1%;
  font-size: 12px;
 }
 h1 {
  font-size: 14px;
 
}
@media screen and (max-width: 300px) {
    .contenido {    
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        font-size: 10px;
    }
    h1 {
        font-size: 12px;
    }
    
}
      

De esta forma tenemos tres opciones de 4 opciones de ancho para visualizar nuestra web, el navegador mostrará una u otra dependiendo del ancho de la pantalla.
Es importante notar que mientras menos espacio se, tendremos que achicar el texto, reducir o eliminar margenes, paddins, tablas, etc.
No es necesario reescribir todo el formato en cada  apartado @media screen, solo sobre escribimos el estilo que deseamos modificar.
Las imágenes podemos colocarlas dentro de un contenedor y darles formato width expresado en porcentajes y no pixeles, así la imagen se redimencionará con el ancho de la web. En algunos casos lo mejor será que algunos elementos no tan importantes no se visualicen en resoluciones pequeñas, para eso podemos colocar un display: none al elemento.
En realidad puedes ahorrarte tiempo y lineas de código con un poco de ingenio al estilo css3.

ver elemplo funcionando.
Descargar archivos de ejemplo


Si te ha gustado esta entrada, Comenta es gratis!!!  o Suscríbete a nuestro blog.