1

レスポンシブサイトにFlexislider2を使用していますが、課題のコードを作成する方法がわかりません。私はHTMLとCSSに精通していますが、JavaScriptはあまり得意ではありません(まだ学習中です:>)。

このサイトはいくつかのブレークポイントでCSSメディアクエリを利用しており、CSSの応答性はすべて問題ありません(fyiについて言及しているだけです)。

ただし、flexisliderには、HTML内(タグ内)でインラインに設定されている属性がいくつかあり、同じブレークポイントで変更する必要があります。

cssメディアクエリが開始するのと同じ方法で、特定の画面幅(ロードだけでなく変更時も含む)でitemWidthの値を動的に変更する必要があります。

だから私の質問は、画面サイズが<=960pxと<=780pxと<=480pxになっている(または変更されている)ときにその属性の値を変更するにはどうすればよいですか?

基本的に、CSSメディアクエリがヒットすると同時に値を変更する必要があります。これは、参考のために、@ media screen and(max-width:960px)@media screen and(max-width:780px)@media screen and(最大幅: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>
4

1 に答える 1

0
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()の場合を参照してください。

特に2番目のリンクは、あなたがやろうとしていることについて非常に有益です。

于 2013-02-22T18:02:28.523 に答える