Question

我正在将Flexislider2用于响应式网站，并且不确定如何为我所面临的挑战编写代码。我精通HTML和CSS，但不是很擅长javascript（但仍在学习：＆gt;）。

该网站在几个断点处使用CSS媒体查询，所有CSS响应都很好（仅提到fyi）。

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

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

所以我的问题是，当屏幕大小为（或更改）时，如何更改该属性的值＆LT; = 960像素和＆LT = 780px 和＆LT; = 480像素

基本上我需要在我的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
    }
})

您可以找到有关这些hear for resize()和右here for screen.width().

的更多信息

特别是第二个链接对你要做的事情非常有启发性。

基于屏幕大小更改Javascript属性（在HTML中内联） - 如CSS媒体查询

1 个答案: