Мы разрабатываем веб-приложение с открытым исходным кодом для учителей изобразительного искусства по всему миру для совместной работы. Нам нужен хороший сайт, который просто настраивается в зависимости от активной ширины браузера, как это делают google.org или barackobama.com.

Мы можем определить браузер, операционную систему и т. Д., Но не хотим использовать какую-либо эту информацию. Нам просто нужно четыре или пять разных таблиц стилей, которые запускаются при настройке ширины браузера.

Так, например, когда вы посещаете приложение в браузере с помощью компьютера DESKTOP, вы видите полное приложение, когда браузер работает в полноэкранном режиме. Затем, когда браузер уменьшает свою ширину, сайт немедленно и динамически меняет свой формат, чтобы обеспечить универсальную совместимость.

Мы не хотим, чтобы наш CSS изменялся в зависимости от типа браузера или исходной ширины, но вместо этого хотим, чтобы он корректировался каждую миллисекунду в зависимости от текущей ширины области просмотра - независимо от того, является ли он "мобильным" или нет; устройство или «планшет»; компьютер или «рабочий стол» браузер.

Любопытно, что я использую Google Apps Script для размещения нашего веб-приложения, поэтому похоже, что все мета-теги области просмотра удалены.

Как мы можем представить четыре или пять различных таблиц стилей в зависимости от ширины текущего окна просмотра браузера?