{"id":15,"date":"2011-06-09T12:10:09","date_gmt":"2011-06-09T10:10:09","guid":{"rendered":"http:\/\/www.atrioweb.com\/blog\/?p=15"},"modified":"2012-10-29T18:09:52","modified_gmt":"2012-10-29T17:09:52","slug":"uso-de-media-queries-css3-en-la-creacion-de-paginas-web","status":"publish","type":"post","link":"https:\/\/www.atrioweb.com\/blog\/css3\/uso-de-media-queries-css3-en-la-creacion-de-paginas-web","title":{"rendered":"Uso de \u00abmedia queries\u00bb (CSS3) en la creaci\u00f3n de p\u00e1ginas web"},"content":{"rendered":"<p>La creciente utilizaci\u00f3n de pantallas de PC de gran tama\u00f1o y la extensi\u00f3n del uso de internet en los m\u00f3viles obliga a los webmasters a ser capaces de crear p\u00e1ginas webs que se muestren correctamente y sean funcionales en cualquiera de los dispositivos que sean visualizadas. Hasta hace unos pocos a\u00f1os, esto s\u00f3lo era posible en la pr\u00e1ctica con el uso de estructuras \u00abfluidas\u00bb (usando porcentajes para definir el ancho de la web respecto a la pantalla), pero con la creciente aceptaci\u00f3n por los navegadores de CSS3, ya es viable en la pr\u00e1ctica el uso de una novedosa t\u00e9cnica: las \u00abmedia queries\u00bb. En el siguiente tutorial, desarrollado a partir de un ejemplo publicado en <a href=\"http:\/\/www.catswhocode.com\/\" target=\"_blank\">Cats Who Code<\/a>: <a title=\"Permanent Link to Create an adaptable website layout with CSS3 media queries\" rel=\"bookmark\" href=\"http:\/\/www.catswhocode.com\/blog\/create-an-adaptable-website-layout-with-css3-media-queries\">Create an adaptable website layout with CSS3 media queries<\/a>, se mostrar\u00e1 c\u00f3mo crear una web que se visualiza de forma distinta en funci\u00f3n del ancho de la pantalla, gracias al uso de \u00abmedia queries\u00bb.<\/p>\n<p><!--more--><\/p>\n<h3>Demostraci\u00f3n<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.atrioweb.com\/blog\/demos\/css3-media-queries\" target=\"_blank\">Ver demostraci\u00f3n<\/a> (Redimensiona el navegador horizontalmente para ver el efecto del uso de \u00abmedia queries\u00bb)<\/li>\n<\/ul>\n<h3>HTML<\/h3>\n<p>El primer paso es crear el HTML de la p\u00e1gina. Este c\u00f3digo es un ejemplo muy b\u00e1sico de HTML5, con una cabecera con una imagen de fondo y un texto con una imagen. Copia el siguiente c\u00f3digo y gu\u00e1rdalo como <code>index.html<\/code>:<\/p>\n<pre class=\"xhtml\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n\r\n&lt;head&gt;\r\n &lt;meta charset=\"iso-8559-1\"&gt;\r\n &lt;title&gt;Atrioweb. Demostraci\u00f3n&lt;\/title&gt;\r\n &lt;link href=\"estilos.css\" type=\"text\/css\" rel=\"stylesheet\" media=\"screen\"&gt;\r\n &lt;meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0;\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n &lt;div id=\"container\"&gt;\r\n &lt;header&gt;\r\n &lt;h1&gt;&lt;a href=\"#\"&gt;Atrioweb&lt;\/a&gt;&lt;\/h1&gt;\r\n &lt;\/header&gt;\r\n\r\n &lt;div id=\"content\"&gt;\r\n &lt;h2&gt;Granada, Espa\u00f1a&lt;\/h2&gt;\r\n &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula massa. Donec consequat, risus nec viverra condimentum, elit velit dignissim dui, id congue sapien leo tincidunt est. Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce sodales fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapien eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget faucibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id aliquam 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 leo. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis. Morbi ultrices risus vulputate magna dignissim sed ultricies arcu tristique. Sed non facilisis sapien.\r\n &lt;\/p&gt;\r\n\r\n &lt;p&gt;&lt;img src=\"catedral.jpg\" alt=\"Foto de la Catedral\"&gt;&lt;\/p&gt;\r\n\r\n &lt;p&gt;Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate tortor, 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 eget ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet accumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gravida velit at nulla imperdiet varius.&lt;\/p&gt;\r\n &lt;\/div&gt;&lt;!-- #content --&gt;\r\n\r\n &lt;footer&gt;Demostraci\u00f3n desarrollada por &lt;a href=\"http:\/\/www.atrioweb.com\"&gt;Atrioweb&lt;\/a&gt; a partir de un ejemplo de &lt;a href=\"http:\/\/www.catswhocode.com\"&gt;CatsWhoCode&lt;\/a&gt;&lt;\/footer&gt;\r\n &lt;\/div&gt;&lt;!-- #container --&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3>CSS<\/h3>\n<p>El siguiente paso es a\u00f1adir una hoja de estilos CSS a la p\u00e1gina, vincul\u00e1ndola desde la secci\u00f3n head de la web. Copia el siguiente c\u00f3digo y gu\u00e1rdalo como <code>estilos.css<\/code> en el mismo directorio donde has puesto el <code>index.html<\/code>:<\/p>\n<pre class=\"css\">*{\r\n margin:0;\r\n padding:0;\r\n}            \r\n\r\nbody{\r\n background:#f5f5f5;\r\n font-family: Arial, sans-serif;\r\n font-size:13px;\r\n line-height:1.6em;\r\n color:#444;\r\n}     \r\n\r\np{\r\n margin:15px 0;\r\n}              \r\n\r\nh2{\r\n margin-top:20px;\r\n}\r\n\r\n#container{\r\n background:#fff;\r\n border-left:1px #ddd solid;\r\n border-right:1px #ddd solid;\r\n border-bottom:1px #ddd solid;\r\n width:600px;\r\n margin:0 auto;\r\n}  \r\n\r\nheader h1 a{\r\n text-indent:-9999px;\r\n display:block;\r\n width:600px;\r\n height:98px;\r\n background:url(image-med.jpg) no-repeat 50% 0;\r\n}             \r\n\r\n#content{\r\n padding:0 15px;\r\n}\r\n\r\nfooter{\r\n text-align:center;\r\n width:100%;\r\n display:block;\r\n font-size:11px;\r\n}  \r\n\r\nimg {\r\n max-width:570px;\r\n}<\/pre>\n<p>De esta forma, si visualizas <code>index.html<\/code> mediante un navegador en tu PC ver\u00e1s algo similar a esto:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2011\/06\/css3-media-queries-pantalla11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-24\" title=\"css3-media-queries-pantalla1\" src=\"http:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2011\/06\/css3-media-queries-pantalla11-530x341.jpg\" alt=\"\" width=\"530\" height=\"341\" srcset=\"https:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2011\/06\/css3-media-queries-pantalla11-530x341.jpg 530w, https:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2011\/06\/css3-media-queries-pantalla11-300x193.jpg 300w, https:\/\/www.atrioweb.com\/blog\/wp-content\/uploads\/2011\/06\/css3-media-queries-pantalla11.jpg 1000w\" sizes=\"auto, (max-width: 530px) 100vw, 530px\" \/><\/a><\/p>\n<h3>Uso de media queries CSS3 para modificar la estructura de la p\u00e1gina en funci\u00f3n del tama\u00f1o de la pantalla<\/h3>\n<p>Si se observa la p\u00e1gina creada con una pantalla de PC con una resoluci\u00f3n muy superior a 800x600px, se podr\u00eda pensar que la estructura de la p\u00e1gina es muy peque\u00f1a, es decir, que el espacio que ocupan los contenidos es muy reducido con relaci\u00f3n al espacio disponible en la pantalla. Por el contrario, si se visualiza con el navegador de un tel\u00e9fono m\u00f3vil, la estructura de la p\u00e1gina podr\u00eda resultar demasiado grande y escaparse de los l\u00edmites de la pantalla, provocando que aparezca una barra de desplazamiento horizontal, lo que sin duda dificulta la lectura y observaci\u00f3n del contenido.<\/p>\n<p>Aqu\u00ed es donde entra en acci\u00f3n la t\u00e9cnica de los \u00abmedia queries\u00bb. Gracias a ella podemos modificar el modo en que se visualiza la estructura de la p\u00e1gina en distintos dispositivos.<\/p>\n<p>En primer lugar vamos a modificar la forma en que se muestra la p\u00e1gina en pantallas muy grandes. Para ello cogemos el archivo <code>estilos.css<\/code> y a\u00f1adimos al final lo siguiente:<\/p>\n<pre class=\"css\">@media screen and (min-width:1200px){\r\n img {\r\n max-width:1000px;\r\n }\r\n\r\n #container{\r\n width:1100px;\r\n }  \r\n\r\n header h1 a{\r\n width:1100px;\r\n height:180px;\r\n background:url(image.jpg) no-repeat 0 0;\r\n }                          \r\n\r\n}<\/pre>\n<p>Despu\u00e9s de insertar este c\u00f3digo, si visualizas de nuevo la p\u00e1gina en una pantalla de navegador mayor de 1200 p\u00edxeles, ver\u00e1s que las dimensiones de la estructura de la p\u00e1gina y de la foto de cabecera son mucho mayores que los definidos en el archivo <code>estilos.css<\/code> original. Y lo que es m\u00e1s interesante: si pinchas en la esquina inferior derecha del navegador para redimensionar su ventana, ver\u00e1s que si la pantalla se reduce por debajo de 1.200 p\u00edxeles, la estructura de la p\u00e1gina cambia, adapt\u00e1ndose a la nueva dimensi\u00f3n.<\/p>\n<p>Como puede apreciarse, la implementaci\u00f3n de esta t\u00e9cnica es bastante sencilla. <code>@media screen {} <\/code>es una regla CSS3 \u00abmedia query\u00bb que indica al navegador que los nuevos estilos definidos entre los corchetes deben aplicarse s\u00f3lo a la visualizaci\u00f3n en pantalla (no cuando se imprime). Y <code>and (min-width:1200px)<\/code> especifica que dichos estilos s\u00f3lo se mostrar\u00e1n si la ventana es mayor de 1.200 p\u00edxeles.<\/p>\n<p>Esta regla \u00abmedia query\u00bb y sus estilos definidos entre los corchetes est\u00e1n situados al final del archivo estilos.css, as\u00ed que lo que hacen es redefinir (sobreescribir) los estilos definidos anteriormente. Las propiedades de las etiquetas HTML definidas con anterioridad a la nueva regla <code>@media screen {}<\/code> y que no se redefinen entre los corchetes se mantienen intactas.<\/p>\n<p>Despu\u00e9s de crear esta regla \u00abmedia query\u00bb de estilos para las grandes pantallas, ahora vamos a definir una nueva regla destinada a las pantallas de los tel\u00e9fonos m\u00f3viles. Copia y a\u00f1ade el siguiente c\u00f3digo al final de <code>estilos.css<\/code>:<\/p>\n<pre class=\"css\">@media screen and (max-width:600px){\r\n img {\r\n max-width:290px;\r\n }\r\n\r\n #container{\r\n width:auto;\r\n } \r\n\r\n header h1 a{\r\n width:auto;\r\n }\r\n}<\/pre>\n<p>La nueva configuraci\u00f3n de estilos puede visualizarse no s\u00f3lo en la pantalla de un tel\u00e9fono m\u00f3vil sino tambi\u00e9n en el navegador de PC si ajustamos la ventana a un tama\u00f1o no superior a 600px. Sin embargo, dada la variedad de tama\u00f1os de las pantallas de los tel\u00e9fonos m\u00f3viles, esta configuraci\u00f3n puede valer para los smartphones con grandes pantallas, pero puede resultar excesiva para los m\u00f3viles con pantallas de ancho menor a 320px, por lo que vamos a definir una nueva regla para \u00e9stos:<\/p>\n<pre class=\"css\">@media screen and (max-width:320px){\r\n img {\r\n max-width:200px;\r\n }\r\n\r\n #container{\r\n width:auto;\r\n } \r\n\r\n header h1 a{\r\n width:auto;\r\n height:52px;\r\n background:url(image-small.jpg) no-repeat 50% 0;\r\n }\r\n}<\/pre>\n<h3>Im\u00e1genes<\/h3>\n<p>Destacar por \u00faltimo que el c\u00f3digo original CSS y las sucesivas redefiniciones del mismo a trav\u00e9s de las reglas media query incluyen la readaptaci\u00f3n del tama\u00f1o original de la imagen incrustada en el texto a trav\u00e9s de reglas max-width. De esta forma, la imagen <code>catedral.jpg<\/code>, con un tama\u00f1o real de 640x480px, se muestra m\u00e1s peque\u00f1a y queda bien encajada en los l\u00edmites del div .container en el caso de que la p\u00e1gina se visualice en pantallas medianas o peque\u00f1as.<\/p>\n<h3>Navegadores que implementan las \u00abmedia queries\u00bb<\/h3>\n<p>La t\u00e9nica de los media queries es aceptada ya desde hace alg\u00fan tiempo por la mayor\u00eda de los \u00abbuenos\u00bb navegadores (entendiendo por \u00abbuenos\u00bb todos excepto Internet Explorer). Como siempre, Microsoft ha tardado mucho m\u00e1s en unir IE al grupo de navegadores que aceptan esta t\u00e9cnica, y s\u00f3lo lo hace en la versi\u00f3n 9:<\/p>\n<ul>\n<li>Safari 4+<\/li>\n<li>Chrome 4+<\/li>\n<li>Firefox 3.5+<\/li>\n<li>IE9+<\/li>\n<\/ul>\n<p>Dado que el uso de IE en los m\u00f3viles es cada d\u00eda m\u00e1s residual,  en mi opini\u00f3n la t\u00e9cnica de las \u00abmedia queries\u00bb est\u00e1 lista para ser cada vez m\u00e1s ampliamente utilizada en el desarrollo web.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La creciente utilizaci\u00f3n de pantallas de PC de gran tama\u00f1o y la extensi\u00f3n del uso de internet en los m\u00f3viles obliga a los webmasters a ser capaces de crear p\u00e1ginas webs que se muestren correctamente y sean funcionales en cualquiera &hellip; <a href=\"https:\/\/www.atrioweb.com\/blog\/css3\/uso-de-media-queries-css3-en-la-creacion-de-paginas-web\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":52,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.atrioweb.com\/blog\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}