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

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

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

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

---

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

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

---

您不能显式地进行媒体查询，但可以使用以下代码检查窗口宽度：

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');

$（窗口）。调整大小（函数（）{
如果（viewport（）.width>x&&viewport（）.width

您可以使用Paul Irish的进行Javascript媒体查询，但它在IE9及更早版本中不起作用。尽管如此，它还是非常有用的，您可以有条件地使用不太精确的方法（如

$（window.width（）

）处理IE

---

js通过

窗口支持媒体查询。matchMedia

这允许您创建如下内容

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

或

在现代浏览器中，支持是很好的，并且也有可用的，但不支持开箱即用的大小调整

更多信息-

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
}