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.
@media screen and (min-width: 1024px) { body {<br />
}<br />
}<br />
font-size: 100%;<br />
Cada media query — incluyendo el que se mostró arriba — consta de dos partes:<br />
1. Cara query empieza con un media type (screen), viniendo de las especificaciones de CSS2.1<br />
aprobadas para los media types. (http://bkaprt.com/rwd/26/).<br />
2. Inmediatamente después viene el query en sí, envuelto en paréntesis. (min-width: 1024px).<br />
Ahora, nuestro query se puede dividir en dos componentes: el nombre de la característica (min-width)<br />
y su valor correspondiente (1024px).<br />
Piensa cómo un navegador analiza un media query. Cuando el navegador lea tu hoja de estilos, el screen<br />
and (min-width: 1024px) hace dos preguntas: la primera es que si pertenece al media type screen<br />
y la segunda si el espacio del navegador es, de al menos 1024 pixeles de ancho. Si el navegador coincide<br />
con los dos criterios, entonces el código que se encuentra dentro del query se ejecutará, y si no es así, el<br />
navegador felizmente evitará ese estilo y seguirá con su vida.<br />
El media query de arriba es parte de una declaración @media, lo que permite poner queries directamente<br />
en nuestra hoja de estilos CSS. Aunque también se pueden poner queries en un elemento link<br />
insertándolo en el atributo media:<br />
<br />
IDENTIFICANDO LOS PUNTOS DE RESOLUCIÓN<br />
Los puntos de resolución son los quiebres que tienes que hacer para saber en dónde aplicar los media<br />
queries que necesitas para tu página web. Eso no quiere decir que las resoluciones que no aparezcan<br />
acá se tienen que ignorar, o que algunos dispositivos no se acomodarán a alguna resolución que no<br />
esté en lista, dado que el diseño responsive está basado en una grilla flexible, entonces hay un grado<br />
de independencia en su construcción. Pero al mostrar los queries como se hará a continuación ayuda<br />
a definir un alcance a nuestros esfuerzos, permitiendo idenfiticar los dispositivos más usados por los<br />
clientes y cómo funcionar de la mejor manera a través de las resoluciones.<br />
25 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries