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

您应该使用 CSS 媒体查询而不是 javascript 来解决您的问题。

这是一个例子：

<!-- 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 回答