如何将媒体查询添加到jQuery中？

Question

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

当我的屏幕达到800像素时，我需要减少“slideWidth: 83”;

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

- user2965875

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

- Richard Pullinger

Answer 2

不可以，但是你可以测量窗口的当前宽度，并根据此配置你的代码：

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

如果您需要响应式的效果，请同时将您的代码与window.onresize事件绑定：

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

- Blazemonger

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(function(){
    if(viewport().width > x && viewport().width < y){
        //do something
    }
}).trigger('resize');

- Karl-André Gagnon

Answer 4

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

• MDN文章
• Caniuse兼容性表格

- Ennui