WILFREDO SALAS G. - Responsive Web Design - Webuda
WILFREDO SALAS G. - Responsive Web Design - Webuda
WILFREDO SALAS G. - Responsive Web Design - Webuda
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
CAPÍTULO 4<br />
Media queries<br />
CON LAS HERRAMIENTAS QUE se han dado durante el paso del manual están “casi” listos para hacer sitios<br />
web flexibles. Por qué “casi”, porque inclusive en este punto la página web no es a prueba de balas.<br />
Van a haber partes en donde nuestro diseño se rompa cuando se redimensione, o sea, hay algo que está<br />
saliendo mal o el navegador no entiende bien lo que quisimos decir al principio en nuestro código.<br />
Desde que empezamos a trabajar con nuestro sitio flexible, podemos probarlos redimensionando el<br />
tamaño de nuestro navegador a distintos anchos. Ahora, esto no es un substituto para no probar nuestro<br />
sitio en los distintos dispositivos en el cual vamos a trabajar, pero nos permite un acceso rápido a nuestro<br />
sitio es varios tamaños disponibles, y simular cómo se verá en smartphones, tablets, y otros dispositivos<br />
que tengamos que usar.<br />
En este momento es donde tenemos que usar el tercer y último ingrediente esencial para nuestra página<br />
web flexible, que son los media queries.<br />
¿MEDIA QUÉ?<br />
Media Queries (http://bkaprt.com/rwd/27/) es una característica única de CSS3, que se hizo<br />
gracias a los media types que venían en las versiones anteriores de este lenguaje de programación.<br />
Es un mecanismo robusto que, no sólo identifica tipos de media, sino que también inspecciona las<br />
especificaciones físicas de los dispositivos y navegadores que renderizan el contenido.<br />
Aquí va un ejemplo:<br />
24 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries