如何將媒體查詢添加到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兼容性表