Адаптивная вёрстка через jQuery
В предыдущей статье мы разобрали медиа-запросы в CSS, которые являются ключевыми в адаптивной вёрстке. Но на практике не всегда получается одними стилями адаптировать сайт под небольшую ширину экрана. Поэтому приходится менять не только стили, но и структуру страницы. И в этой статье я покажу, как сделать адаптивную вёрстку через jQuery.
Разберём достаточно классическую задачу. Есть трёхколоночный сайт. И нам необходимо его адаптировать под ширину, например, 480px. Обычными стилями тут никак не обойтись, поэтому необходимо менять структуру. Самый простой способ - это просто всё содержимое правой колонки поставить вниз левой. То есть фактически, превратить трёхколоночный сайт в двухколоночный.
Это тоже пример адаптивной вёрстки, но уже через jQuery. Давайте с Вами это реализуем (не забудьте подключить библиотеку jQuery):
<script type="text/javascript">
$(document).ready(function() {
var w = $(window).width(); // Получаем ширину окна
if (w <= 480) { // Если ширина окна меньше, либо равна 600
$("#left").html($("#left").html() + $("#right").html()); // Копируем содержимое правой колонки в левую
$("#right").remove(); // Удаляем правую колонку
}
});
</script>
Я думаю, что тут код достаточно прозрачный. Безусловно, без медиа-запросов в CSS тут не обойтись. В частности, у центральной колонки изначально есть margin-left и margin-right. И поскольку теперь правой колонки нет, то margin-right надо обнулить, и, тем самым, центральная часть увеличится, и уместить контент на небольших экранах станет значительно проще.
Таким образом, Вы теперь знаете всю необходимую теорию по адаптивной вёрстке через jQuery. А в большинстве случаев используются и jQuery, и медиа-запросы в CSS, поэтому и то, и другое надо обязательно знать.
-
Создано 14.03.2014 12:24:49
-
Михаил Русаков
Комментарии (7):
Михаил, а вы будите менять дизайн своего сайта? Просто заметил новый дизайн вашего сайта на продающей странице нового курса по сиэсэс 3 и аштиэмэль 5.
Ответить
Дмитрий,всё в работе. Из-за недостатка времени у Михаила - это не быстро. Естественно,дизайн будет изменён
Ответить
Друзья, есть обычный трехколоночный сайт. <div id="content"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> Установил jQuery, проверил, работает. Но скрипт адаптивной верстки не работает. Куда нужно конкретно вставить этот код, чтобы скрипт заработал? Спасибо.
Ответить
Здравствуйте, Анатолий. А, где скрипт? Я не вижу. И впервые слышу о скрипте jQuery который делает адаптивную верстку. Скорее всего Вы не так поняли.
Ответить
Александр, спасибо. С этим разобрался. Теперь у меня такой вопрос. Как правильно написать условие? "Если ширина окна больше, либо равна 320 И меньше, либо равна 768"?
Ответить
if (w >= 320 AND w <= 768) // Если ширина окна больше, либо равна 320 И меньше, либо равна 768"
Ответить
Ещё плохо разбираюсь в JS; как сделать так, чтобы $(document).ready(function().. срабатывала при каждом изменении ширины окна? Я уже разобрался, что надо добавить в <body> атрибут onResize="...", но как заставить скрипт выполниться ещё раз? Ведь у функции нет имени.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.