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

Адаптивная верстка на JavaScript. Аналог @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); 
//запускается каждый раз, когда заданное разрешение медиа запроса достигнуто

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

Аналог на нативном JavaScript

Вот тоже эффект без использования jQuery.

document.addEventListener("DOMContentLoaded", function(event) { 
        /*ПОЛУЧАЕТ ТЕКУЩУЮ ШИРИНУ ЭКРАНА*/
        var widthWind = document.querySelector('body').offsetWidth;
        if (widthWind <= 750) {
             /*КОД КОТОРЫЙ ДОЛЖЕН ВЫПОЛНЯТЬСЯ*/
        }
});
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

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

avatar
3 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
treantincJanleF Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

High On Amoxicillin [url=https://apcialisle.com/#]buy cheap cialis online[/url] Want To Buy Real Finasteride Cialis Diges Tea

JanleF
Гость

Prescribing Information For Amoxicillin [url=https://abuycialisb.com/#]Buy Cialis[/url] Buy Tadalis Sx Generic buy cialis What Makes Viagra Work

treantinc
Гость
treantinc

Medicament Amoxil Kakerent [url=https://bbuycialisss.com/#]buy cialis online[/url] fadiappept Viagra Online Australia groongendodo Cialis CaunninkCify Baclofene Sevrage