Media, Media on the wall
Este fin de semana estuve leyendo un par de cosas sobre Media Queries con la intención de hacer una página en HTML adaptable en diferentes dispositivos, incluyendo desktop.
Después de varios intentos para que se vea bien en diferentes resoluciones (320px, 768px, 1024px, 1200px) encontré que mi principal problema era la escala del viewport
Viewport:
<meta name="viewport" content="width=device-width,
maximum-scale=1.0" />
Esta solución aparece en un artículo de Allen Pike del 2010 donde explica porqué en el iPad aparecen los pixeles muy grandes.
@media:
Chris Coyier habla sobre media queries para dispositivos estándares y muestra un listado de 8 resoluciones diferentes. Aquí lo único que hacía falta es combinar las resoluciones de dispositivos con el de desktop. El mismo Sr. Coyier responde a esta duda con un post donde explica
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
y el resultado es:
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px)
Ahora todo va muy bien en diferentes resoluciones y dispositivos; el único contra que encuentro es cómo mantener tantas queries. Espero encontrar una respuesta en dos horas.
