Estamos desarrollando una aplicación web de código abierto para que los maestros de arte de todo el mundo trabajen juntos. Necesitamos un buen sitio web que simplemente se ajuste a sí mismo en función del ancho activo del navegador, como google.org o barackobama.com lo hace tan bien.

Podemos detectar el navegador, el sistema operativo, etc., pero no queremos usar ninguna de esa información. Solo queremos cuatro o cinco hojas de estilo diferentes que se activan cuando se ajusta el ancho del navegador.

Entonces, por ejemplo, cuando visita la aplicación en un navegador usando una computadora DESKTOP, ve la aplicación completa cuando el navegador está en pantalla completa. Luego, a medida que el navegador reduce su ancho, el sitio cambia su formato de forma inmediata y dinámica para permitir la compatibilidad universal.

No queremos que nuestro CSS cambie según el tipo de navegador o el ancho original, sino que se ajuste a milisegundos en función del ancho actual de la ventana gráfica, independientemente de si es un dispositivo "móvil" o un " Tablet "máquina o un navegador de" escritorio ".

Curiosamente, estoy usando Google Apps Script para alojar nuestra aplicación web, por lo que parece que se eliminan todas las etiquetas de meta viewport.

¿Cómo podemos introducir cuatro o cinco hojas de estilo diferentes en función del ancho de la ventana del navegador de visualización actual?