5

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

当我的屏幕尺寸达到 800 像素时，我需要减小“slideWidth：83”；

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

4 回答 4

8

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

于 2013-11-12T13:56:28.513 回答
4

不，但您可以测量窗口的当前宽度并基于此配置您的代码：

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

如果您需要它做出响应，请将您的代码也与window.onresize事件联系起来：

$(window).on('resize', function() {
    if ($(window).width()<768) {
        // do whatever
    }
});
于 2013-11-12T13:43:54.240 回答
1

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

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');
于 2013-11-12T13:45:22.847 回答
1

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

于 2013-11-12T13:52:41.427 回答