Хочу робити адаптивний дизайн
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-му. Якщо можна, ок, затінюємо екран, підміняємо, знімаємо затінення.
- При наступних переходах по сайту сервер віддає клієнту (браузеру) відразу потрібні стилі, згідно зберігається у сховищі значенням.
- Без будь-яких гальм.
Може, це і велосипед, але він мені подобається. :)