Как Вы знате, одних медиа-запросов на CSS
может быть недостаточно для нормальной адаптивной вёрстки, и когда надо менять состав потока и сам поток, приходится использовать JavaScript
.
Если бы задача просто заключалась в том, чтобы единыжды сформировать поток под размер окна смартфона с предположением того, что потом ширину окна многократно менять не будут, технических проблем было бы не так много. Моя же задача в том, чтобы вне зависимости от устройства (смартфон, десктоп или планшет) менялись стили и вёрстка, сколько бы изменений размеров окна не производилось.
Я вижу оптимальный подход в решении этой задачи таким:
- Делаем базовую вёрстку: всё, что внутри
<body>
, обёртываем в<noscript>
. Теперь сайт будет отображаться при выключенном Javascript. На этом этапе при влючённом JS у нас будет пустая страница. - Заносим все HTML-объекты вместе с атрибутами (включая классы и ID) во внешний файл JS; каждую группу объектов (заголовки, таблицы и прочие составные объекты) делаем значением переменной.
- Пишем функцию
BodyResize()
, которая при каждом изменении размера окна будет удалять всё внутри<body>
и выстраивать поток заново. - Все стили будут храниться в CSS-файле; как только поток будет выстроен, нужные стили применятся.
Ещё раз повторюсь, что весь этот мазохизм нужен затем, чтобы неограниченное количество раз менять ширину окна, и вне зависимости от того, какая ширина была изначально, отобразится нужный поток (при всём моём уважении к автору, этот подход не решит данной задачи: он лишь единыжды сформирует поток при загрузке страницы. Я пытался модифицировать этот сценарий, чтобы он срабатывал при каждом изменении размера окна, но лишь только перемещением и вставкой объектов (insertAfter
, preprendTo
и т. д.) задачу не решить: чтобы каждый таким образом формировать правильный поток для конкретного диапазона ширин, нужно прописать все комбинации else if для каждой исходной и окончательной ширины окна).
Итак, вопросы:
- Какие недостатки у приведённого выше подхода (кроме низкой скорости загрузки)?
- Какие подходы, лучший чем этот Вы можете предложить (кроме RESS; этот подход реализуем только группой профессионалов)?
- Приведите пожалуйста 2-3 строчки кода пустой функции JS, которая срабатывает как при первой загрузки страницы, так и при изменении размера окна (я пока могу реализовать только что-то одно).