@media Querys

HTML
El primer paso es crear el HTML de la pgina. Este cdigo es un ejemplo muy bsico de HTML5, con una cabecera con una imagen de fondo y un texto con una imagen. Copia el siguiente cdigo y gurdalo como index.html:
view plaincopy to clipboardprint?
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="iso-8559-1"> 6. <title>Atrioweb. Demostracin</title> 7. <link href="estilos.css" type="text/css" rel="stylesheet" media="screen"> 8. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximumscale=1.0;"> 9. </head> 10. 11. <body> 12. <div id="container"> 13. <header> 14. <h1><a href="#">Atrioweb</a></h1> 15. </header> 16. 17. <div id="content"> 18. <h2>Granada, Espaa</h2> 19. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula mas sa. Donec consequat, risus nec viverra condimentum, elit velit dignissim dui, i d congue sapien leo tincidunt est. Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing eli t. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce soda les fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapie n eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget fauc ibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orc i luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id a liquam nec, vulputate vitae mauris. Integer gravida, neque eu placerat egestas, urna metus bibendum nisl, quis congue felis velit id diam. Quisque non tortor at turpis facilisis placerat quis sed felis. Ut eget ipsum dolor, id lacinia le o. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis. M orbi ultrices risus vulputate magna dignissim sed ultricies arcu tristique. Sed non facilisis sapien. 20. </p> 21. 22. <p><img src="catedral.jpg" alt="Foto de la Catedral"></p> 23. 24. <p>Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate to rtor, in iaculis ipsum orci vitae libero. Vestibulum laoreet accumsan erat vel pretium. Ut turpis elit, ultricies id accumsan non, condimentum feugiat neque. Nam ut erat urna, a porta augue. Donec vel porttitor magna. Cras eget tortor eg et ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet a ccumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gr avida velit at nulla imperdiet varius.</p> 25. </div> 26. 27. <footer>Demostracin desarrollada por <a href="http://www.atrioweb.com">Atriow eb</a> a partir de un ejemplo de <a href="http://www.catswhocode.com">CatsWhoCo de</a></footer> 28. </div> 29. </body> 30. </html>
CSS
El siguiente paso es aadir una hoja de estilos CSS a la pgina, vinculndola desde la seccin head de la web. Copia el siguiente cdigo y gurdalo comoestilos.css en el mismo directorio donde has puesto el index.html:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52.
*{ margin:0; padding:0; } body{ background:#f5f5f5; font-family: Arial, sans-serif; font-size:13px; line-height:1.6em; color:#444; } p{ margin:15px 0; } h2{ margin-top:20px; } #container{ background:#fff; border-left:1px #ddd solid; border-right:1px #ddd solid; border-bottom:1px #ddd solid; width:600px; margin:0 auto; } header h1 a{ text-indent:-9999px; display:block; width:600px; height:98px; background:url(image-med.jpg) no-repeat 50% 0; } #content{ padding:0 15px; } footer{ text-align:center; width:100%; display:block; font-size:11px; } img { max-width:570px; }
De esta forma, si visualizas index.html mediante un navegador en tu PC vers algo similar a esto:
Uso de media queries CSS3 para modificar la estructura de la pgina en funcin del tamao de la pantalla
Si se observa la pgina creada con una pantalla de PC con una resolucin muy superior a 800x600px, se podra pensar que la estructura de la pgina es muy pequea, es decir, que el espacio que ocupan los contenidos es muy reducido con relacin al espacio disponible en la pantalla. Por el contrario, si se visualiza con el navegador de un telfono mvil, la estructura de la pgina podra resultar demasiado grande y escaparse de los lmites de la pantalla, provocando que aparezca una barra de desplazamiento horizontal, lo que sin duda dificulta la lectura y observacin del contenido. Aqu es donde entra en accin la tcnica de los media queries. Gracias a ella podemos modificar el modo en que se visualiza la estructura de la pgina en distintos dispositivos. En primer lugar vamos a modificar la forma en que se muestra la pgina en pantallas muy grandes. Para ello cogemos el archivo estilos.css y aadimos al final lo siguiente:
1. @media screen and (min-width:1200px){ 2. img { 3. max-width:1000px; 4. } 5. 6. #container{ 7. width:1100px; 8. } 9.
10. 11. 12. 13. 14. 15. 16.
header h1 a{ width:1100px; height:180px; background:url(image.jpg) no-repeat 0 0; } }
Despus de insertar este cdigo, si visualizas de nuevo la pgina en una pantalla de navegador mayor de 1200 pxeles, vers que las dimensiones de la estructura de la pgina y de la foto de cabecera son mucho mayores que los definidos en el archivo estilos.css original. Y lo que es ms interesante: si pinchas en la esquina inferior derecha del navegador para redimensionar su ventana, vers que si la pantalla se reduce por debajo de 1.200 pxeles, la estructura de la pgina cambia, adaptndose a la nueva dimensin. Como puede apreciarse, la implementacin de esta tcnica es bastante sencilla. @media screen {} es una regla CSS3 media query que indica al navegador que los nuevos estilos definidos entre los corchetes deben aplicarse slo a la visualizacin en pantalla (no cuando se imprime). Y and (minwidth:1200px) especifica que dichos estilos slo se mostrarn si la ventana es mayor de 1.200 pxeles. Esta regla media query y sus estilos definidos entre los corchetes estn situados al final del archivo estilos.css, as que lo que hacen es redefinir (sobreescribir) los estilos definidos anteriormente. Las propiedades de las etiquetas HTML definidas con anterioridad a la nueva regla @media screen {}y que no se redefinen entre los corchetes se mantienen intactas. Despus de crear esta regla media query de estilos para las grandes pantallas, ahora vamos a definir una nueva regla destinada a las pantallas de los telfonos mviles. Copia y aade el siguiente cdigo al final deestilos.css:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
@media screen and (max-width:600px){ img { max-width:290px; } #container{ width:auto; } header h1 a{ width:auto; } }
La nueva configuracin de estilos puede visualizarse no slo en la pantalla de un telfono mvil sino tambin en el navegador de PC si ajustamos la ventana a un tamao no superior a 600px. Sin embargo, dada la variedad de tamaos de las pantallas de los telfonos mviles, esta configuracin puede valer para los smartphones con grandes pantallas, pero puede resultar excesiva para los mviles
con pantallas de ancho menor a 320px, por lo que vamos a definir una nueva regla para stos:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
@media screen and (max-width:320px){ img { max-width:200px; } #container{ width:auto; } header h1 a{ width:auto; height:52px; background:url(image-small.jpg) no-repeat 50% 0; } }
Imgenes
Destacar por ltimo que el cdigo original CSS y las sucesivas redefiniciones del mismo a travs de las reglas media query incluyen la readaptacin del tamao original de la imagen incrustada en el texto a travs de reglas max-width. De esta forma, la imagen catedral.jpg, con un tamao real de 640x480px, se muestra ms pequea y queda bien encajada en los lmites del div .container en el caso de que la pgina se visualice en pantallas medianas o pequeas.
Navegadores que implementan las media queries

La tnica de los media queries es aceptada ya desde hace algn tiempo por la mayora de los buenos navegadores (entendiendo por buenos todos excepto Internet Explorer). Como siempre, Microsoft ha tardado mucho ms en unir IE al grupo de navegadores que aceptan esta tcnica, y slo lo hace en la versin 9:

Safari 4+ Chrome 4+ Firefox 3.5+ IE9+
Dado que el uso de IE en los mviles es cada da ms residual, en mi opinin la tcnica de las media queries est lista para ser cada vez ms ampliamente utilizada en el desarrollo web.
Estamos acostumbrados a que las propiedades CSS nos permiten controlar la forma en que se ve nuestro sitio, sin embargo, pese a que por lo general lo vemos a travs de un monitor, esa no es la nica forma de acceso. Obviamente, ahora, con los telfonos mviles esto es evidente pero ya antes haba otras formas tales como, por ejemplo, una impresora. La regla llamada @media es la que permite especificar las propiedades que tendr nuestro sitio segn sea el medio en el cual se mostrar: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haramos que la sidebar no se imprimiera:
@media screen { /* pantalla */ #sidebar-wrapper { display: block; } } @media print { /* impresora */ #sidebar-wrapper { display: none; } }
El
medio est definido por palabras: all, aural, braille, embossed, handheld, print, projection,screen, tty, tv e incluso hay propiedades exclusivas para determinados medios pero, el tema que ms me interes de esto es lo que se muestra en un artculo de CSS-Tricks donde se hace referencia a una nueva serie de palabras claves que nos permitiran controlar la forma en que mostramos nuestro sitio segn sea el tipo de resolucin de pantalla que tenga el visitante. Veamos la Plantilla Mnima de Blogger. All, el blog queda establecido con un ancho de 660 pixeles; es lo que dice la propiedad width de tres definiciones: #headerwrapper, #outer-wrapper y#footer. Est pensada para una resolucin que era la "normal" en el 2006, es decir 800x600 pero, como el tiempo pasa inexorable, si bien sigue siendo un tamao usado, la gran mayora fue cambiando a resoluciones mayores y en algn momento, lo "normal" era 1024x768 por lo tanto lo que veamos era el mismo blog pero grandes espacios vacios a los lados, es decir, el blog apareca pequeo y perdido en una pantalla grande. De all que hubo muchos de nosotros que a fuerza de errores fuimos modificndolos para ampliarlosun poco aunque esto termina siendo una pelea imposible de ganar ya que las resoluciones siguen aumentando constantemente. Claro que una solucin es utilizar los llamados diseos fluidos que se adaptan automticamente a la resolucin aunque en lo personal, no me convencen demasiado. Tambin es cierto que pueden usarse scripts que permiten utilizar distintas hojas de estilo e incluso que el usuario elija cul utilizar. Ahora, @media viene a agregar una posibilidad extra que sera bueno explorar aunque por el momento no est implementada en Internet Explroer pero si en el resto de los navegadores (ms informacin). Para ver un ejemplo vamos a usar la misma Plantilla Mnima de Blogger; la dejamos tal como est aunque en el ejemplo le he agregado una sidebar extra. Los anchos que definen el blog son estos: #header-wrapper #outer-wrapper #main-wrapper #sidebar-wrapper #footer = = = = = width: width: width: width:660px; 660px; 410px; 220px; width:660px;
As que vamos a agregarle definiciones al estilo, de <b/skin> pondremos tres modelos diferentes de este modo:
por
ejemplo,
luego
<style> /* esto funcionar si la resolucin de pantalla est entre 300 y 800 pixeles de ancho */ @media (max-width: 800px) and (min-width: 300px) { #header-wrapper { width:300px; } #outer-wrapper { width: 300px; } #main-wrapper { width: 300px; } #footer { width:300px; } /* no mostraremos ninguna sidebar */ #sidebar-wrapper { display:none; } #sidebar-wrapper2 { display:none; } ....... cualquier otra variante ....... } /* esto funcionar si la resolucin mnima de la pantalla es de 1200 pixeles de ancho */ @media (min-width: 1200px) { #header-wrapper { width:1000px; } #outer-wrapper { width: 1000px; } #main-wrapper { width: 670px; } #sidebar-wrapper { width: 300px; } #footer { width:1000px; } /* no mostraremos la segunda sidebar */ #sidebar-wrapper2 { display:none; } ....... cualquier otra variante ....... } /* esto funcionar si la resolucin mnima de la pantalla es de 1600 pixeles de ancho */ @media (min-width: 1600px) { #header-wrapper { width:1400px; } #outer-wrapper { width: 1400px; } #main-wrapper { width: 600px; } #sidebar-wrapper { width: 350px; } #footer { width:1400px; } /* mostraremos la segunda sidebar */ #sidebar-wrapper2 { display:block; } ....... cualquier otra variante ....... } </style>
Usando max-width, min-width, max-height y min-height podemos definir las "condiciones" en las que nuestro sitio se ver, estableciendo anchos o cualquier otra propiedad general o particular. La idea la pueden comprobar en este demo online y para eso no hace falta cambiar la resolucin de la pantalla, basta que amplien o reduzcan el tamao de la ventana del navegagor ya que esos valores no se refieren al monitor en si mismo sino al espacio fsico que ocupa la ventana del navegador. A medida que amplien esa ventana, vern que el ancho cambia y una imagen en una sidebar se muestra de diferente tamao. Incluso, si se llega a superar el ancho mximo, aparecer la segundasidebar que sino, permanece oculta; en el demo, tambin cambian el color de fondo, el tamao de los textos y su color. Hay otras palabras similares: min-device-width, max-device-width, min-deviceheight, max-device-height pero tambin muchas otras que amplian an ms las cosas. device-aspect-ratio y orientation permiten distinguir el aspecto, por ejemplo:
@media (device-aspect-ratio: 16/9) { ... } /* para pantallas de tipo widescreen */ @media (orientation:portrait) { ... } /* para pantallas ms altas que anchas */ @media (orientation:landscape) { ... } /* para pantallas ms anchas que altas */ Lo mismo con la resolucin de los colores:
@media (color) { ... } /* para monitores color */ @media (monochrome) { ... } /* para monitores blanco y negro */ @media (min-color-index: 256) { ... } /* para monitores con 256 colores */ Lo interesante de esto es que los cambios funcionan dinmicamente, es decir, no hay necesidad de recargar la pgina por lo menos, agregndolo directamente aunque tambin es posible hacerlo enlazando las hojas de estilo alternativas:
<link type='text/css' rel='stylesheet' media='screen' href='URL_por_defecto.css' /> <link type='text/css' rel='stylesheet' media='screen and (max-width: 800px) and (min-width: 300px)' href='URL_pequeo.css' /> <link type='text/css' rel='stylesheet' media='screen and (min-width: 1200px)' href='URL_mediano.css' /> <link type='text/css' rel='stylesheet' media='screen and (min-width: 1600px)' href='URL_grande.css' />

@media Querys

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

@media Querys

Uploaded by

Copyright:

Available Formats

HTML

1. @media screen and (min-width:1200px){ 2. img { 3. max-width:1000px; 4. } 5. 6. #container{ 7. width:1100px; 8. } 9.

10. 11. 12. 13. 14. 15. 16.

header h1 a{ width:1100px; height:180px; background:url(image.jpg) no-repeat 0 0; } }

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.

Navegadores que implementan las media queries

Safari 4+ Chrome 4+ Firefox 3.5+ IE9+

You might also like