如何将媒体查询添加到Jquery中

Question

是否可以将媒体jquery添加到您的jquery代码中？

当我的屏幕达到800px的大小时，我需要减少“slideWidth：83”;

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

Answer 1

通过window.matchMedia在js中支持媒体查询

这允许你创建类似的东西

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

Answer 2

不，但您可以测量窗口的当前宽度并根据以下内容配置代码：

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

如果您需要响应，请将您的代码绑定到window.onresize事件：

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

Answer 3

你不能明确地有媒体查询，但你可以用这个小代码检查窗口宽度：

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事件检查宽度，如下所示：

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

Answer 4

您可以使用Paul Irish的MatchMedia.js polyfill进行Javascript媒体查询，但它不能在IE9及更早版本中使用。 它仍然非常有用，您可以使用不太精确的方法（如$(window).width() ）有条件地处理IE。

• MDN文章
• Caniuse兼容性表