Хочу делать адаптивный дизайн
9 ноября 2013
Плотно поигрался день с телефоном, и вот результат.
Хочу делать сайты с адаптивным дизайном :)
Адаптивный дизайн — это что-то вроде такого: http://www.templatemonster.com/ru/demo/47310.html
По сути 6 вариаций (модификаций) одного и того же авторского креатива.
Я выделил навскидку такие вариации разрешений:
- Стоячий смарт: 480х800
- Лежачий смарт: 800х480
- Стоячий планшет: 600х1000
- Лежачий планшет (и мой нетбук): 1000х600
- Стандартные девайсы: >=1280х---
- FullHD и больше: >=1980х---
Не хочу использовать монстров типа bootstrap и им подобных, и, кстати, не хочу где надо и где не надо использовать jquery, так что в скором будущем от него на фронт-енде буду избавляться.
Поток мыслей для реализации таков:
- Так как на сервере невозможно получить напрямую разрешение экрана, его надо определять на клиенте.
- При первой загрузке страницы сайта сервер отдает клиенту файл стилей по умолчанию, асинхронно javascript определяет разрешение экрана и еще что-то, что может понадобиться, и передает эти значения на сервер, тот это все записывает в сессию (или в другое хранилище).
- Для каждой модификации дизайна имеется заранее заготовленный, склеенный, сжатый и заархивированный файл стилей (css).
- Дальше надо пробовать, экспериментировать, я точно не знаю, можно ли подменить стилевую таблицу браузера на лету javascript-ом. Если можно, ок, затеняем экран, подменяем, снимаем затенение.
- При последующих переходах по сайту сервер отдает клиенту (браузеру) сразу нужные стили, согласно сохраненному в хранилище значению.
- Без каких-бы то ни было тормозов.
Может, это и велосипед, но он мне нравится. :)