0

画面サイズに応じて左マージンを管理するにはどうすればよいですか。実際、ボタンをクリックすると左側からスライドするフォームがあります。しかし、このフォームに実際の左マージンを設定することはできません。

これが私のスクリプトです：

<script type="text/javascript">
        $( window ).resize(function() { 

        var sh =  $( window ).width();   
        if(sh > "1300" && sh < "1350")
        {      
         document.getElementById("pay").style.marginLeft="0%";
         document.getElementById("feedback1").style.marginLeft="0%";
        }
        else if(sh > "1350" && sh < "1400")
        {         
         document.getElementById("pay").style.marginLeft="-7%";
         document.getElementById("feedback1").style.marginLeft="-7%";
        }
        else if(sh > "1200" && sh < "1300")
        {         
         document.getElementById("pay").style.marginLeft="7%";
         document.getElementById("feedback1").style.marginLeft="7%";
        }
        else if(sh > "950" && sh < "1200")
        { 
         document.getElementById("pay").style.marginLeft="12%";
         document.getElementById("feedback1").style.marginLeft="12%";
        }
        else if(sh > "1400" && sh < "1600")
        {  

         document.getElementById("pay").style.marginLeft="-7%";
         document.getElementById("feedback1").style.marginLeft="-7%";
        }
        else if(sh > "1600" && sh < "1900")
        {          
         document.getElementById("pay").style.marginLeft="-25%";
         document.getElementById("feedback1").style.marginLeft="-25%";
        }
       });

しかし、異なる画面サイズでは正しく機能しません。誰かが私に適切な提案をしてもらえますか?

4

2 に答える 2

1

問題を解決するには、javascript の代わりに CSS メディア クエリを使用する必要があります。

以下に例を示します。

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(min-width: 500px) and (max-width: 800px)" href="example.css" />

またはインライン スタイル:

<style>
    @media (min-width: 500px) and (max-width: 800px) {
      #pay{
         margin-left: 0%;
      }
    }
</style>

ドキュメント: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-11-14T07:49:35.653 に答える
0

あなたがやろうとしていることではありませんが、CSS3 アクションを使用できます http://www.w3schools.com/css/css3_animations.asp ここにチュートリアルがあります

于 2013-11-14T07:48:48.327 に答える