Question

如何根据屏幕尺寸管理左边距。实际上我有一个通过单击按钮从左侧滑动的表单。但是我不能在这个表格中设置实际的左边距。

这是我的剧本：

<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%";
        }
       });

但它不能适用于不同的屏幕尺寸。谁能给我适当的建议？

Answer 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

Answer 2

即使这不是你想要做的，但你可以使用CSS3动作 http://www.w3schools.com/css/css3_animations.asp 这是一个教程

根据屏幕尺寸管理我的保证金

2 个答案: