—»     —»   Проверяем media queries при помощи Javascript
  Раздел: Java-Скрипты   Нет комментариев  

Проверяем media queries при помощи Javascript



Проверяем media queries при помощи Javascript

Так как сегодня выходить в интернет можно с абсолютно разных устройств, очень важно создавать такие дизайны, которые способы адаптироваться под разрешения и размеры любых экранов и девайсов. Лучше всего с данной задачей справляются media queries, которые позволяют вам определить размер используемого экрана и подстроить под него контент и шаблон.

В основном, эти изменения вносятся в CSS-файл, так как у вас будет возможность использовать точки преломления (breakpoint) в media queries, чтобы изменять дизайн в зависимости от дизайна.

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {

}

Вышеприведенный код позволит вам применять абсолютно разные стили на различных устройствах, но что если вы хотите изменять и функционал в зависимости от используемого устройства? Что если вам нужно использовать немного javascript-кода на различных устройствах. К примеру, для того, чтобы создать кнопку для выдвижения навигации.

Как использовать media queries с jQuery

Media Queries проверит ширину окна, чтобы примерно определить используемое устройство, чтобы у нас в дальнейшем была возможность применять методы типа .width() к объекту window.

if($(window).width() < 767)
{
// change functionality for smaller screens
} else {
// change functionality for larger screens
}

Однако эта проверка не даст нам действительного значения размеров окна, так как здесь не учитываются различные свойства вроде отступов от краев или строки скроллинга. Есть и другая возможность проверить размер окна, и заключается она в применении javascript-метода .matchMedia() к объекту window.

var window_size = window.matchMedia('(max-width: 768px)'));

Этот метод работает по тому же принципу что и media queries, и поддерживается во многих браузерах, за исключением IE9 и ниже.

Чтобы воспользоваться matchMedia, вам нужно ввести минимальное и максимальное значения, которые вам нужно проверить (как и в media queries), и узнать, совпадают ли с ними значения viewport.

if (window.matchMedia('(max-width: 768px)').matches)
{
// do functionality on screens smaller than 768px
}

Теперь вы можете использовать данный метод для того, чтобы добавить click-событие в подменю для экранов, размер которых меньше 768 пикселей. Нижеприведенный код – это пример того, как вы можете добавить немного javascript-кода, который будет запускать исключительно на устройствах, размер экрана которых меньше 768 пикселей.

if (window.matchMedia('(max-width: 768px)').matches)
{
$('.sub-menu-button').on('click', function(e)
{
var subMenu = $(this).next('.sub-navigation');
if(subMenu.is(':visible'))
{
subMenu.slideUp();
} else {
subMenu.slideDown();
}

return false;
});
}
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 4748   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930