Vivimos en un tiempo donde la resolución y tamaño de pantalla «estándar» es imposible de predecir para todos los medios y dispositivos. Desde el clásico 640×480 px hasta el 1024×768 px (pasando por 800×600 px) hemos visto desfilar diferentes «resoluciones estándar de pantallas». Sin embargo, el éxito de los monitores wide, con diferentes proporciones y resoluciones en sus pantalla, sumado a esto la expansión infinita de smartphones y tablets, han conjugado un nuevo panorama en el diseño y desarrollo de sitios web.
Crear un sitio con dimensiones fijas ya no será suficiente en la mayoría de los casos y la capacidad de detectar características de pantalla se ha vuelto una necesidad fundamental para diseñadores y desarrolladores Web. De la mano de CSS3 encontramos un excelente camino para resolver esta necesidad.
¿Qué podemos hacer con Media Queries? Muchas cosas. Entre ellas aplicar reglas de estilos según el ancho o el alto de la pantalla o modificar estilos cuando el dispositivo cambia su orientación (entre vertical y horizontal).
¿Un ejemplo de uso? Supongamos que tenemos dos divs (cuyas id son div1 y div2, respetivamente) y que los tenemos flotando a la izquierda. El primer div ocupa el 30% y el segundo 70% en el esquema. El CSS sería algo como lo que sigue:
div1{width:30%;float:left;}
div2{width:70%;float:left;}
Ahora vayamos al caso que al estar en una resolución de un dispositivo móvil, por ejemplo 480px de ancho, deseamos que los divs ocupen, cada uno, el total del ancho y queden uno debajo del otro (en lugar de estar uno al lado del otro). Podremos aplicar una regla de Media Queries como la que sigue:
@media screen and (max-width: 480px) {
div1{width:100%;}
div2{width:100%;}
}
¿Sencillo, verdad? Si bien cuando suelo explicar esto a mis alumnos parece ser «pan comido», la realidad indica que en estructuras más complejas puede ser más laborioso llegar al modelo ideal, sin embargo, Media Queries nos abre las puertas para un mundo fascinante que nos permitirá resolver una multitud de situaciones de diseño. De la mano de esta característica, aparece también una nueva tendencia denominada Responsive Web Design o el Diseño Web Adaptado al Dispositivo.
Es importante destacar que Media Queries es W3C Recommendation desde Junio de 2012 y cuenta con muy buena compatibilidad en navegadores de escritorio y también en móviles (http://caniuse.com/css-mediaqueries).
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Me topé con ese problema al confeccionar una revista de mi asociación y quería que se viese bien en cualquier tipo de pantalla.
Al final opté por un grid horizontal y vertical fluido con un javascript pequeño para redimensionar las fuentes en función del tamaño vertical y horizontal de la pantalla y un media querie para pantallas menores de 641px, o sea, móviles.
No sólo eso, sino que además quería que sin css y javascript fuese accesible.
Pd.: Aun quedan cosas por mejorar, pero poco a poco.
No hay técnica perfecta. Igualmente en mis desarrollos siempre he optado por Mediaqueries, los grids no me terminan de convencer. Pero es cuestión de analizar lo mejor para cada proyecto sin fanatizar por una técnica u otra.
Saludos y gracias por el comentario.
Hola Damián un gusto, otra alternativa puede ser modernizr un framework, que realiza las compatibilidades de resoluciones.
http://modernizr.com/
Utilizando html5 y css3, está bueno para las resoluciones mobile.
Saludos!
Modernizr es una gran herramienta que ha evolucionado muy bien. Es de gran ayuda para todos los que desarrollamos con HTML5 y CSS3 🙂
El problema que tuve con Modernizr, realice todos los pasos que dice la doc pero no funcionó, busque todas las formas y nada.
Así que seguro siga con Media Queries que me funciona siempre 🙂
Saludos.
Mediaqueries es útil para trabajar con diferentes resoluciones de pantalla mediante CSS.
Modernizr es para detectar características soportadas por el navegador y actuar en consecuencia. Lo que hay que tener en cuenta es que Modernizr nos dirá lo que informe el navegador y si el navegador informa un «falso positivo» eso nos puede traer un problema.
Hay un caso que he notado y es cuando deseas testear el soporte de audio de HTML5 en Android 2.2. Te dice que funciona pero en la práctica no anda. Esto es porque el soporte de audio está en esa versión, pero no soporta ningún códec. Para hacer el test fiable, se debe hacer por tipos, en ese caso.
Saludos
Hola quisiera saber como ubicar una capa y que se localice siempre en la misma posicion en distintas resoluciones de pantalla.
dado que si cambio la resolucion o saco alguna barra de herramientas, como favoritos menu etc….. se mueve de pocion
la capa contiene una imagen trasnparente que siempre aparece igual del musmo color y mantiene la transparencia , eso anda bien, pero la ubicacion no es la misma en distintos resoluciones en distintos monitores (comunes, lcd, etc…)
Bueno Gracias
Ariel
Ariel: para ubicar un elemento en una posición fija podés usar o bien positio:absolute o position:fixed (según corresponda a lo que necesites hacer). Te paso un link donde explica y da ejemplos de como se usa la propiedad position de CSS: http://www.w3schools.com/cssref/pr_class_position.asp
Saludos
Damián
Tengo mi web creada y lista … con todo sus css … el problema que hace poco me pidieron que sea compatible en varias resoluciones.
El punto es que yo cuando llamo a una pagina … esta pasa por parametros los anchos y altos de cada pagina… y no se como contrar eso y complementarlo para que se pueda ver en varias resoluciones ….
se te agradece la ayuda
El tema es que si tu sitio Web originalmente estaba pensado con medidas fijas y ahora necesitas que se adapta, tendrás que analizar todos los aspectos de usabilidad, accesibilidad y diseño para que pueda adaptarse.
No se a qué parámetros te refieres, pero para contruir un contenido adaptable puedes usar MediaQueries, que te permitirá generar reglas condicionales en el CSS y así aplicarlas según el medio y sus características.
Saludos
Damián
Hola,
Gracias por escribir acerca de media queries, al respecto yo tengo muchas dudas y más porque en este momento quiero hacer que mis páginas html se adapten a cualquier dispositivo. Particularmente yo descargue Boilerplate y ahí empece a modificar el index y el CSS.
Cuando revise la parte de las queries me di cuenta que tiene definido 4 apartados con la especificación de los anchos de pantalla, sobre esto no se como empezar, o que me recomienda para empezar a adaptar mis páginas.
¿Comienzo por agregar los códigos a la resolución p.ej. 1440 x 900 o comienzo por la más chica?
Por ejemplo, si tengo mi etiqueta nav con CSS y su código respectivo, todo el código dentro de nav (css3) solo lo copio y pego donde estan definidas las queries?
¿Cómo interpreta la página todo aquello que no este dentro de las queries?
Gracias por leer y responder
Hola Rocío, es posible trabajar de diversas formas con mediaqueries. Lo que te conviene es definir un CSS general tal como lo hacés siempre. Ahí se puede poner lo de «pantallas grandes» y luego en los mediaqueries vas definiendo lo específico para pantallas más chicas. También es posible pensar en «Mobile First» y comenzar por definir lo general para pantallas chicas y luego definir las particularidades de las pantallas más grandes.
Una buena opción puede ser poner al final los mediaqueries.
Todo esto va en los styles (se pueden poner en un CSS externo)
Espero haber aclarado las dudas.
Saludos
Damián
Buenas,
gracias por tus aportes. He intentado, agregando la etiqueta viewport con sus atributos, y luego con media queries, y no logro que la web se adapte al movil!!! o me sale en miniatura, o me hace mucho zoom saliendo de la pantalla; pero no logro que respete el ancho del movil. podrás darme una mano? te agradecería enormemente!