WILFREDO SALAS G. - Responsive Web Design - Webuda

Recommendations

Info

CAPÍTULO 4 Media queries CON LAS HERRAMIENTAS QUE se han dado durante el paso del manual están “casi” listos para hacer sitios web flexibles. Por qué “casi”, porque inclusive en este punto la página web no es a prueba de balas. Van a haber partes en donde nuestro diseño se rompa cuando se redimensione, o sea, hay algo que está saliendo mal o el navegador no entiende bien lo que quisimos decir al principio en nuestro código. Desde que empezamos a trabajar con nuestro sitio flexible, podemos probarlos redimensionando el tamaño de nuestro navegador a distintos anchos. Ahora, esto no es un substituto para no probar nuestro sitio en los distintos dispositivos en el cual vamos a trabajar, pero nos permite un acceso rápido a nuestro sitio es varios tamaños disponibles, y simular cómo se verá en smartphones, tablets, y otros dispositivos que tengamos que usar. En este momento es donde tenemos que usar el tercer y último ingrediente esencial para nuestra página web flexible, que son los media queries. ¿MEDIA QUÉ? Media Queries (http://bkaprt.com/rwd/27/) es una característica única de CSS3, que se hizo gracias a los media types que venían en las versiones anteriores de este lenguaje de programación. Es un mecanismo robusto que, no sólo identifica tipos de media, sino que también inspecciona las especificaciones físicas de los dispositivos y navegadores que renderizan el contenido. Aquí va un ejemplo: 24 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries
@media screen and (min-width: 1024px) { body { } } font-size: 100%; Cada media query — incluyendo el que se mostró arriba — consta de dos partes: 1. Cara query empieza con un media type (screen), viniendo de las especificaciones de CSS2.1 aprobadas para los media types. (http://bkaprt.com/rwd/26/). 2. Inmediatamente después viene el query en sí, envuelto en paréntesis. (min-width: 1024px). Ahora, nuestro query se puede dividir en dos componentes: el nombre de la característica (min-width) y su valor correspondiente (1024px). Piensa cómo un navegador analiza un media query. Cuando el navegador lea tu hoja de estilos, el screen and (min-width: 1024px) hace dos preguntas: la primera es que si pertenece al media type screen y la segunda si el espacio del navegador es, de al menos 1024 pixeles de ancho. Si el navegador coincide con los dos criterios, entonces el código que se encuentra dentro del query se ejecutará, y si no es así, el navegador felizmente evitará ese estilo y seguirá con su vida. El media query de arriba es parte de una declaración @media, lo que permite poner queries directamente en nuestra hoja de estilos CSS. Aunque también se pueden poner queries en un elemento link insertándolo en el atributo media: IDENTIFICANDO LOS PUNTOS DE RESOLUCIÓN Los puntos de resolución son los quiebres que tienes que hacer para saber en dónde aplicar los media queries que necesitas para tu página web. Eso no quiere decir que las resoluciones que no aparezcan acá se tienen que ignorar, o que algunos dispositivos no se acomodarán a alguna resolución que no esté en lista, dado que el diseño responsive está basado en una grilla flexible, entonces hay un grado de independencia en su construcción. Pero al mostrar los queries como se hará a continuación ayuda a definir un alcance a nuestros esfuerzos, permitiendo idenfiticar los dispositivos más usados por los clientes y cómo funcionar de la mejor manera a través de las resoluciones. 25 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries
Page 1 and 2: WILFREDO SALAS G. Responsive Web De
Page 3 and 4: CAPÍTULO 1 Nuestro Mundo Sensible
Page 5 and 6: FIG.2 FIG.1 FIG.1 es el link que se
Page 7 and 8: Desde que este proyecto empezó a e
Page 9 and 10: FIG.3 Un ejemplo de la página web
Page 11 and 12: #titulo h2{ } font-family:meta_seri
Page 13 and 14: #titulo h2{ } font-family:meta_seri
Page 15 and 16: Paso 2 Escribe el código: Aunque e
Page 17 and 18: Paso 4 Aplicar la fórmula: La fór
Page 19 and 20: CAPÍTULO 3 Imágenes flexibles HAS
Page 21 and 22: FIG.9 Y dio problema. A pesar de qu
Page 23: EL PLACER DE ESTAR “OCULTO” Com
Page 27 and 28: 600 px Tablets pequeños, como el A
Page 29 and 30: 1200 px Pantallas anchas (widescree
Page 31 and 32: REPASA LA “MEJORA PROGRESIVA” L

WILFREDO SALAS G. - Responsive Web Design - Webuda

Create successful ePaper yourself

Delete template?

Save as template?