Question

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

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

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

Answer 1

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

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。

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

4 个答案: