Хочу робити адаптивний дизайн

9 листопада 2013

Щільно погрався день з телефоном, і ось результат.

Хочу робити сайти з адаптивним дизайном :)

Адаптивний дизайн - це щось на зразок такого: http://www.templatemonster.com/ru/demo/47310.html

По суті 6 варіацій (модифікацій) одного і того ж авторського креативу.

Я виділив навскидку такі варіації дозволів:

  1. Стоячий смарт: 480х800
  2. Лежачий смарт: 800х480
  3. Стоячий планшет: 600х1000
  4. Лежачий планшет (і мій нетбук): 1000х600
  5. Стандартні девайси: >=1280х---
  6. FullHD і більше: >=1980х---

Не хочу використати монстрів типу bootstrap і їм подібних, і, до речі, не хочу де треба і де не треба використовувати jquery, так що в недалекому майбутньому від нього на фронт-енде буду позбавлятися.

Потік думок для реалізації такий:

  1. Так як на сервері неможливо отримати безпосередньо дозвіл екрана, його треба визначати на клієнті.
  2. При першому завантаженні сторінки сайту сервер віддає клієнту файл стилів за замовчуванням, асинхронно javascript визначає дозвіл екрану і ще щось, що може знадобитися, і передає ці дані на сервер, той це все записує у сесію (або в інше сховище).
  3. Для кожної модифікації дизайну є заздалегідь заготовлений, склеєний, стислий і заархівований файл стилів (css).
  4. Далі треба пробувати, експериментувати, я точно не знаю, чи можна підмінити стильову таблицю браузера на льоту javascript-му. Якщо можна, ок, затінюємо екран, підміняємо, знімаємо затінення.
  5. При наступних переходах по сайту сервер віддає клієнту (браузеру) відразу потрібні стилі, згідно зберігається у сховищі значенням.
  6. Без будь-б то не було гальм.

Може, це і велосипед, але він мені подобається. :)

Оцініть сторінку
(0 голосів, в середньому: 0 з 5)
Ваш відгук стане першим