Respond JS - Javascript para interpretar mediaqueries en navegadores antiguos

¡¡Vamos a eliminar otro quebradero de cabeza!!

Como bien sabemos, y aunque hasta ahora no habíamos empezado a ponerlo en práctica, a la hora de hacer una maqueta RWD, la recomendación es seguir las pautas "Mobile First", que indican que lo más óptimo es maquetar primero para móvil, e ir sobreescribiendo los estilos de móvil con mediaqueries de tal modo que sobrecargamos menos la css de estilos "inútiles" para dispositivos pequeños. Os dejo los enlaces donde hablábamos de este tema:

http://babelcreativa.blogspot.com.es/2014/09/mobile-first.html
http://babelcreativa.blogspot.com.es/2014/09/mas-mobile-first.html


Pues bien, esta técnica tiene un quebradero de cabeza añadido y es que, al escribir los estilos de móvil en primer lugar, IE8 (y 7... y 6... y 5... etc) no entiende los estilos que van dentro de los mediaqueries, por lo que nuestra maqueta mostrará los estilos de móvil en IE8 (y 7... y 6... y 5... etc). Podemos solucionar este problema enlazando una librería de javascript llamada respond.js. Podéis ver la documentación en GIT: https://github.com/scottjehl/Respond

Si abrís en link de prueba http://scottjehl.github.io/Respond/test/test.html y vais reduciendo su tamaño, veréis cómo el color de fondo de la página va cambiando a medida que la pantalla se hace más pequeña, y funciona no solo para navegadores modernos, sino también para nuestro querido Internet Explorer en sus versiones más antiguas.

¡¡OJO!! La librería solo funciona si está subida a un servidor. No os volváis locos haciendo pruebas en local, porque no funciona :)