Адаптивная верстка на jQuery

Адаптивная верстка на jQuery. Аналог @media для jQuery скриптов

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

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

И так… нам понадобится библиотеку jQuery и вот такая, простая, функция.

/*ПОДКЛЮЧАЕМ БИБЛИОТЕКУ JQUERY*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

$(window).resize(function () {
    /*ПОЛУЧАЕТ ТЕКУЩУЮ ШИРИНУ ЭКРАНА*/
    var widthWind = $(this).width();

    if (widthWind <= 750) {
       /*КОД КОТОРЫЙ ДОЛЖЕН ВЫПОЛНЯТЬСЯ*/
    }
}
);

Так же я находил более сложные структуры кода, вроде вот этих…

var handleMatchMedia = function(mediaQuery) {
    if (mediaQuery.matches) {
        // если менее 480px или равное, то выполняется код между скобок 
    } else {
        // обратное условие, т.е если более 480px
    }
},
mql = window.matchMedia('all and (max-width: 480px)');
handleMatchMedia(mql);
mql.addListener(handleMatchMedia); 
//запускается каждый раз, когда заданное разрешение медиа запроса достигнуто

Но мне понравился первый вариант, так как он проще и компактнее.

На этом всё!

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/progtime 

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи – https://vk.com/prog_time

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

Так же прокачивайте свои навыки на нашем канале – https://www.youtube.com/c/ProgTime

Рекомендованные

Вам также будет интересно

Оставить комментарий

avatar
  Подписаться  
Уведомление о