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.
La revolución de los Media Queries
Los media queries han sido un componente esencial del diseño web responsive desde su introducción en CSS3. Con un potencial enorme han permitido a diseñadores y desarrolladores web adaptar las interfaces a distintos dispositivos y tamaños de pantalla, garantizando que las páginas web se vean bien y funcionen correctamente en cualquier contexto.
Con la estandarización de Media Queries Level 3 en mayo de 2024, las media queries han dado un salto evolutivo que sigue consolidándolas como una herramienta clave en la maquetación moderna.
¿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).
Media Queries en ejemplos prácticos
¿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? Estas estructuras simplificadas sirven para ejemplificar muy bien los Media Queries. Sin embargo, debemos tener presente que en estructuras más complejas puede ser más laborioso llegar al modelo ideal.
Me parece importante señalar que dentro de las reglas de las @media que definimos solo debemos establecer las nuevas propiedades o los valores que necesitan actualización. Si tenemos valores establecidos en los estilos generales que no se modifican, no resulta necesario volver a establecerlos. Por esa razón en el ejemplo no volví a escribir las reglas relacionadas con flotación, ya que no se modifican en las reglas especificadas dentro de @media screen and (max-width: 480px).
Media Queries nos abre las puertas para un mundo fascinante que nos permite resolver una multitud de situaciones de diseño. De la mano de esta característica ha evolucionado el Responsive Web Design o el Diseño Web Adaptado al Dispositivo.
Media Queries Level 3
Es importante destacar que Media Queries es W3C Recommendation desde Junio de 2012. La versión incial cuenta con muy buena compatibilidad en navegadores de escritorio y también en móviles (http://caniuse.com/css-mediaqueries).
En Mayo de 2024 Media Queries Level 3 llegó al estado de recomendación. Incluyendo interesantes novedades para el estándar.
Con la creciente necesidad de accesibilidad, Level 3 introduce la posibilidad de adaptar el diseño en función del contraste preferido por el usuario. Esto permite personalizar la apariencia de una página para aquellos que tienen necesidades especiales de visualización.
A continuación veremos un ejemplo de esto:
@media (prefers-contrast: high) {
body {
background-color: black;
color: white;
}
}Las consultas ahora permiten diferenciar entre dispositivos que soportan hover (pasar el cursor) y la precisión del puntero. Esto es especialmente útil para distinguir entre interfaces táctiles y no táctiles. Este detalle es una evolución muy importante desde las primeras versiones del estándar.
También se añade capacidad de detectar el rango dinámico de la pantalla (Dynamic Range). Esto resulta muy importante a la hora de adaptar las imágenes y videos a las capacidades HDR (High Dynamic Range) de dispositivos moderno
Consideraciones finales
No caben dudas que los Media Queries siguen siendo esenciales para garantizar que los interfaces Web sean fluidas y se adapten a las necesidades de los usuarios. Vivimos en un mundo donde la variedad de dispositivos va desde relojes inteligentes hasta grandes pantallas de TV. La capacidad de ajustar las interfaces sin necesidad de crear sitios web separados para cada uno es clave para la eficiencia del diseño.
Con la evolución continua del Responsive Web Design, particularmente con la llegada de Media Queries Level 3, los diseñadores y desarrolladores ahora tenemos más herramientas que nunca para diseñar experiencias web altamente personalizadas, adaptativas y accesibles. Estas mejoras refuerzan el papel crucial de las Media Queries en la maquetación web moderna.
A medida que la tecnología sigue avanzando, los Media Queries seguirán siendo un pilar fundamental en el diseño responsive y en la creación de experiencias centradas en el usuario.
Como consideración final me parece importante señalar que Media Queries Level 4 ya está en marcha como Working Draft.
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!