BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Entendiendo el concepto de Media Queries en CSS3

01/AGO/2012 7.609 visitas Ver comentarios
Entendiendo el concepto de Media Queries en CSS3

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Para entender el concepto de Media Query, nada mejor que la definición oficial del W3C que dice: "Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban  el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades  "ancho", "alto" y "color". Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido".

Traduciéndolo al idioma ´martiniano´, una Media Query es una serie de condiciones que pueden aplicarse a nuestras hojas de estilo CSS para que, según el tamaño y resolución del dispositivo, adopte una u otra forma.

Si ya teníamos poco con adaptar las webs para todos los navegadores y Explorer y sus propios estándares, ahora tenemos el reto de hacer que nuestras webs se adapten a nuestro teléfono, tablet, netbook, televisión, reloj Casio de caucho y cuando dispositivo tengamos por ahí que se conecte a Internet.

Pues bien, el uso extensivo de las Media Queries da paso al uso del ya conocido Diseño Adaptativo o Responsive Web Design, del cual dí mis primeros pasos en este artículo que escribí hace unos meses.

Partiendo de cero.
Para empezar es necesario tener claros unos puntos que nos servirán para dejar una base establecida:

 

 

Importante:
Como bien sabrás, Internet Explorer en versiones 8 y anteriores, pasarán del Responsive, del HTML5 y de prácticamente todo lo que hagas, así que no te olvides de la hoja CSS (o usar librerías como Modernizr) específica para este navegador(?).

Viewport.
El viewport es el área visible de nuestro navegador, de tal forma que podemos manipularla como se ve, haciendo que ese área visible sea igual al ancho de dispositivo, esto es súper importante para los dispositivos móviles. 

Resumiendo, es un nuevo meta que se declara en el HEAD de nuestra web que hace que los que los dispositivos no alteren el zoom declarado por la página, es decir, le dices a tu web que tu teléfono no muestre la versión de 1024px reducida, sino que muestre la versión que le corresponde al tamaño original del dispositivo.

Con la gran variedad de equipos y tamaños de pantalla, el viewport nos permite configurarlo de tal manera que pueda ajustarse dinámicamente al tamaño de cada dispositivo usando el atributo ´device-width´ que es equivalente al 100% del ancho de la pantalla de dicho dispositivo, independientemente de su tamaño, posición o resolución.

La configuración básica del viewport es como < meta name = ´viewport´ content = ´width=device-width´ />.

Aplicando las Media Queries.
Los Frameworks que mencioné anteriormente traen toda la lista de Media Queries necesarias para cubrir todas las necesidades con las que podemos encontrarnos hoy día (incluso la nueva Retina Display de Apple).

Para cargar CSS diferentes, podemos usar una sentencia tal como: < link rel=´stylesheet´ type=´text/css´ media=´screen and (max-device-width: 480px)´ href=´estilos.css´ />, con lo que esta hoja CSS se aplicará sólo en pantalla y si nuestro dispositivo tiene menos de 480px de ancho.

También, pueden escribirse directamente en nuestra hoja CSS, pero me parece mejor y más limpio, no mezclar condicionales, en este caso, un ejemplo sería: @ media screen and(max-widht:600px){ body {color: #000;font-size:90%;padding: 0 5%;}}.

En fin, espero que este breve resumen te sirva tanto como me sirvió a mi para empezar a hacer webs adaptativas. Cualquier aporte o sugerencia que quieras dejarme, no lo dudes, será bienvenido!

PD: Yo suelo usar Skeleton como Framework

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 22 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018