CSS媒體查詢和JavaScript

Question

我有一個具有水平jquery圖像輪播的項目。 該網站具有響應能力，輪播需要在一定的屏幕寬度下使圖像變小。 我已經能夠在CSS中完成此操作，但是輪播插件具有一些javascript設置，我需要更改這些設置以完成響應能力。 我已經弄清楚了如何在媒體查詢中工作，以使javascript在頁面加載時進行適當的更改，但是在調整大小時不起作用。 每當我嘗試添加代碼以更改圖像大小時，代碼都會中斷。 有人可以幫我修改此代碼，使其也可以調整大小嗎？...

<script type="text/javascript">

  $(window).load(function(){

  if (document.documentElement.clientWidth < 860) {

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 120,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
    } 

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 160,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });

  });

</script>

Answer 1

工作小提琴

嘗試這個;

$(window).resize(function() {
    if (document.documentElement.clientWidth < 860) {
        // scripts here
    }
});

看一下這個：

$（window）.width（）與媒體查詢不同

根據您的評論

小提琴

var width = $(window).width();
if ((width < 860)) {
alert('Do first action');
} else {
alert('Do Second action');
}

祝好運！

Answer 2

試試這個而不是clientWidth，

if (screen.width < 860) {....}

Answer 3

$(window).resize(function() {
    if (screen.width < 860) {
        // i dont know if Im helping.
    }
});

Answer 4

與它們結合使用on ：

$(window).on("load resize",function(){
    // your code
});

編輯

嘗試使用

$(window).bind("load resize", function(e) {
 // your code
});

或者，可以使用.on（）代替直接使用.bind（）來綁定到on（）。

$(window).on("load resize", function(e) {
 // your code
});

function(e)是event對象。 你可以在這里閱讀

你這樣的最終結果

<script type="text/javascript">

  $(window).on("load resize",function(e){

  if (document.documentElement.clientWidth < 860) {

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 120,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });
    } 

    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 160,
      itemMargin: 5,
      pausePlay: false,
      start: function(slider){
        $('body').removeClass('loading');
      }
    });

  });

</script>

Answer 5

在window.resize（）函數內使用$（document）.ready（function（）。

我認為問題是@ media-query和window.resize（）不同步。 在媒體查詢完成工作后， window.resize（）應該可以工作。 因此，在window.resize（）內部使用include $（document）.ready（function（） ），然后寫下您的條件。