< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приемы верстки html-css » Enquire.js — создаем адаптивные сайты легко

Enquire.js — создаем адаптивные сайты легко

Enquire.js — создаем адаптивные сайты легко

Пост был обновлен: Янв 09, 2017

Приветствую всех в 2017 году! Как быстро летит время, не успел оглянуться, а уже 2017 год. 2017 — можете себе представить? Я всегда оборачиваюсь назад и смотрю какой путь я прошел и чего добился. В 2016 году я получил много теории. Вот, думаю, 2017 год будет чисто практическим. Но, как говориться, будем еще посмотреть.

А теперь давайте я представлю вашему вниманию небольшую javascript библиотеку для работы с медиа запросами (media query) CSS. Т.е. данная заметка посвящена адаптивным дизайнам, что безусловно давно уже в тренде.

Скрипт носит название Enquire.js. Библиотека довольно маленькая и весит продакшен (минимизированная) версия всего — 2,2 кб. Enquire.js библиотека независимая, т.е. может работать без подключения jQuery и ей подобных. Давайте я все таки объясню для чего это все нужно и можно ли обойтись без лишних скриптов. 

Мы знаем, чтобы изменить стиль элемента в CSS на определенном разрешении экрана достаточно написать стиль для определенного экрана, используя медиа запросы — @media. Но что делать, если нам нужно задействовать какой либо скрипт JS на том же размере экрана. Как раз для этого случая нам и понадобится enquire.js. Можно конечно и самому написать данный скрипт, но применение enquire намного удобнее, т.к. у нее есть несколько приятных особенностей.

Итак, качаем скрипт с официального сайта разработчика или с GitHub. Вообще хочу сказать, что на сайте разработчика есть подробнейшая инструкция по данной библиотеке с примерами. Правда она на английском языке, но разобраться будет не сложно.

Подключение и вызов

<script src="/js/enquire.min.js"></script>

Вызываем скрипт методом — register.

enquire.register("screen and (max-width:45em)", {
 
 // НЕ ОБЯЗАТЕЛЬНО 
 // Срабатывает вызов, когда соответствует указанному медиа запросу - matched 
 match: function() {},
 
 // НЕ ОБЯЗАТЕЛЬНО
 // Срабатывает вызов, когда перестает соответствовать указанному медиа запросу - unmatched 
 // переходит из состояния matched в unmatched.  
 unmatch: function() {},

 // НЕ ОБЯЗАТЕЛЬНО 
 // Срабатывает один раз, когда обработчик зарегистрирован  
 setup: function() {},

 // НЕ ОБЯЗАТЕЛЬНО, по умолчанию - false 
 // Если значение истина - "true", то откладывает выполнение функции до первого совпадения с медиа запросом (matched)  
 deferSetup: true,

 // НЕ ОБЯЗАТЕЛЬНО 
 // Срабатывает код, когда обработчик переходит в состояние незарегистрированный (unregistered). 
 destroy: function() {}

});

Теперь давайте разберем на примерах.

Читайте также:  Фреймворк Twitter Bootstrap - что это такое?

Примеры

Match & Unmatch

Откройте демо-страницу и начните уменьшать окно браузера и после Max 990px вы увидете изменения, далее снова верните окно в исходное состояние.

 

В основном на практике я использую именно эти два метода. Ведь имея возможность манипулировать объектами, можно сделать то, что твоей душе угодно.


enquire.register("screen and (max-width: 990px)", {
 
 match: function() { 
 $('.info-block__match').addClass('info-block_match-active');
 $('.info-block__unmatch').removeClass('info-block_unmatch-active');
 },

unmatch: function() {
 $('.info-block__match').removeClass('info-block_match-active');
 $('.info-block__unmatch').addClass('info-block_unmatch-active');
 }
 
 });

Setup & DeferSetup

Иногда бывает нужно, чтобы код JS сработал только один раз, например, когда мы делаем ajax запрос. В примере выше наш код будет срабатывать всякий раз, когда будет совпадение медиа запроса. Для этого воспользуемся методом Setup и deferSetup.

enquire.register("screen and (max-width: 990px)", {

deferSetup: true,
 setup: function() {
 alert("Совпадение - match");
 }

});

Как видите при уменьшении экрана браузера окно Alert’a показывается только один раз и не важно меняете вы далее размер или нет. Если не передать методу deferSetup истину — «true», то окошка алерта будет выскакивать постоянно, т.к. метод Setup срабатывает как только обработчик будет зарегистрирован.

В последнее время я практически всегда использую enquire.js, без него будет очень сложно верстать под мобильные устройства. Раньше я умудрялся располагать блоки на мобильном экране абсолютным позиционированием. Но это было долго и нудно, да и не в каждом случае может прокатить. С помощью же enquire.js я просто перемещаю объекты по DOM дереву документа.

Естественно можно продублировать один и тот же объект два раза и показывать его на определенном разрешении экрана, через CSS, но это будет не правильно. Зачем создавать лишние запросы, загружая сервер и браузер. Такие манипуляции скажутся на быстродействии сайта. Также на одной странице не должно быть повторяющихся одинаковых индефикаторов. Так можно поступить с небольшими объектами, например, иконки. А вот, например, модуль меню дублировать не стоит, тем более, если оно содержит очень много пунктов.

Читайте также:  Фикс родительского блока, имеющего вложенные элементы с правилами "float"

Таким образом, используя Enquire.js и медиа запросы CSS мы можем быстро и качественно верстать адаптивные сайты. Мне лично помогает такой подход. 

На этом сегодня все. До встречи в следующих постах!

Пост был обновлен: Янв 09, 2017

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (1 оценок, среднее: 3,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

    Комментариев пока нет, будьте первым.

    Добавить комментарий

    Войти с помощью: 

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

    • Код HTML - тегами [html] ваш код... [/html]
    • Код CSS - тегами [css] ваш код... [/css]
    • Код PHP - тегами [php] ваш код... [/php]
    • Код JavaScript - тегами [code lang="js"] ваш код... [/code]