Как создать адаптивный (резиновый) дизайн сайта на jQuery?

Что такое адаптивый дизайн?

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, который позволяет корректно, в зависимости от используемого пользователем устройства, отобразить содержимое как отдельной страницы, так и сайта в целом.

Зачем же нужен адаптивный дизайн? Начну со статистики. Данные TNS за март 2013 года вы можете видеть на слайде ниже.


Как Вы можете видеть, примерно треть аудитории заходит со смартфонов и планшетов. И это при условии того, что процент каждый месяц только растёт. Как Вы понимаете, лучше держать нос по ветру!)

Как реализовать на своём сайте адаптивную вёрстку?

Поскольку средствами одного CSS решить проблему явно недостаточно (менять надо не только стили, но и структуру и содержание блоков), то воспользуемся jQuery. Зачастую сайт состоит из нескольких блоков: главный и сайдбары. Если адаптировать сайт под мобильные устройства, то это не более 2-х блоков (слева и справа).

Ниже привёл пример кода адаптивной вёрстки. В нём самые азы - остальное можете добавить на усмотрение. И не забудьте подключить библиотеку jQuery! ( см. Как подключить библиотеку jQuery? )

Код JS (jQuery)

<script type="text/javascript">
  $(document).ready(function() {

    var w = $(window).width(); // Ширина окна
    var h = $(window).height(); // Высоту окна. Не используем. Для справки

    if (w <= 480) { // если ширина меньше или равна 480

      $("#left").html($("#left").html() + $("#right").html()); // копируем содержимое правой колонки в левую
      $("#right").remove(); // теперь удаляем правую колонку

      $("#left").css({"left":"10px", "right":"15px"}); // допустим теперь нужно изменить css у левой колонки
    }

  });
</script>

Если Вы имеете хотя бы базовые знания JS или jQuery, то код должен быть понятен. В нашем случае допускается, что есть сайт из главного блока (середина) и двух боковых: слева и справа (сайдбаров). Если скрипт вычисляет ширину окна и она меньше 480, то содержание правого блока записывается в нижнюю часть левого. В качестве дополнения указал строчку с изменением стилей левого блока (так как теперь правый удалён, отступы наверняка изменяются). Ну это Вы уже под себя подберёте!)

Как видите, всё достаточно просто! Само собой рекомендовано использовать блочную, а не табличную вёрстку, строгую разметку и тд. И изменить шаблон сайта не составит труда!

Спасибо за внимание! И не забывайте о тех, кто решил посмотреть Ваш сайт со смартфона!)