Как добавить медиа-запросы в JQuery

Question

Можно ли добавить jQuery для мультимедиа в ваш код jquery?

Мне нужно уменьшить «slideWidth: 83», когда мой экран достигает размера 800 пикселей;

$(document).ready(function(){ 
    $('.slider4').bxSlider({ 
    slideWidth: 83, 
    minSlides: 2, 
    maxSlides: 9, 
    moveSlides: 1, 
    slideMargin: 15 
    }); 
}); 

Answer 1

Нет, но вы можете измерить текущую ширину окна и настроить свой код, основанный на том, что:

if ($(window).width()<768) { 
    // do whatever 
} 

Если вам это нужно, чтобы быть отзывчивым, привязать свой код к window.onresize событие, а также:

$(window).on('resize', function() { 
    if ($(window).width()<768) { 
     // do whatever 
    } 
}); 

Answer 2

вы не можете явно есть медиазапросы, но вы можете проверить ширину окна с этой небольшой код:

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

Я не могу вспомнить, где я нашел этот код, так что я не могу дать кредит ...

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

$(window).resize(function(){ 
    if(viewport().width > x && viewport().width < y){ 
     //do something 
    } 
}).trigger('resize'); 

Answer 3

Вы можете использовать Paul Irish's MatchMedia.js polyfill, чтобы делать запросы к Javascript, но он не будет работать в IE9 и ранее. Тем не менее это очень полезно, и вы можете условно обрабатывать IE с менее точным методом (например, $(window).width()).

• MDN article
• Caniuse compatibility table

Answer 4

Медиа запросы поддерживаются в JS с помощью window.matchMedia

Это позволяет создать что-то вроде

var isPortrait = window.matchMedia("(orientation: portrait)"); 
if (isPortrait.matches){ 
    // Screen is portrait 
} 

или

var smallScreen = window.matchMedia("(max-width: 480px)"); 
if (smallScreen.matches){ 
    // Screen is less than 480px 
} 

Поддерживается в современных браузерах и имеется polyfill, но он не поддерживает изменение размера из коробки.

Дополнительная информация - https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia