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（） ），然后写下您的条件。