根据屏幕大小更改Javascript属性（HTML中的内联），例如CSS Media Queries

Question

我将Flexislider2用于响应性网站，不确定如何编写代码以应对挑战。 我精通HTML和CSS，但是不是很擅长javascript（但仍在学习：>）。

该站点在几个断点处利用CSS媒体查询，并且所有CSS响应能力都很好（为方便起见，仅提及）。

但是，flexislider中有一些属性是在HTML（标记内）内联设置的，我需要在相同的断点处进行更改。

我需要以css Media Queries加入的相同方式，在某些屏幕宽度（包括更改时，不仅是加载时）动态更改itemWidth的值。

所以我的问题是，当屏幕尺寸为（或更改）为<= 960px和<= 780px和<= 480px时，如何更改该属性的值

基本上，我需要在我的CSS媒体查询命中的同时更改该值，仅供参考：@media屏幕和（最大宽度：960px）@media屏幕和（最大宽度：780px）@media屏幕和（最大宽度：480px）

这是当前与HTML文档内联的javascript。

<script type="text/javascript">
    $(window).load(function(){ 
      $('#testimonial_carousel').flexslider({
             animation: "slide",
             animationLoop: false,
             slideshow: false,
             randomize: false,
             itemWidth: 472,
             itemMargin: 0,
             start: function(slider){
               $('body').removeClass('loading');
             }
      });
    });
  </script>

Answer 1

window.resize(function(){
    if(screen.width <= 480){
        //do something
    }else if (screen.width <= 780){
        //do something else
    }else if(screen.width <= 960){
        //do final thing
    }
})

您可以在resize（）和screen.width（）上找到有关这些声音的更多信息。

第二个链接对您尝试做的事情特别有启发性。