根据屏幕尺寸管理我的边距

manage my margin according to screen sizes

本文关键字：我的 管理 屏幕      更新时间：2023-09-26

如何根据屏幕尺寸管理左边距。实际上，我有一个通过单击按钮从左侧滑动的表单。但是我无法将实际的左边距设置为此表单。

这是我的脚本：

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

但它不能在不同的屏幕尺寸下正常工作。谁能给我适当的建议？

你应该使用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

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

相关文章：