javascript - 分辨率改变物体的位置

Question

我已经尝试为 body 标签设置一个固定宽度，但它似乎无法像对其他人那样工作……我显然做错了什么。我的问题是:如何使屏幕不缩小并导致对象错位是通过最小化屏幕还是使用较低的分辨率？

我尝试使用百分比，因为它目前是这样，但它并非完美无缺。 如果你想在这里自己查看页面，它是

 <style type="text/css">

  div.register {
      border-style: hidden;
      position: absolute;
      right: 20.1%;
      left: 20.1%;
      top: 25%;
      bottom: 5%;
      background-color: lightblue;
      border-radius: 5px;
      font: 150% simple CLM;
      box-shadow: 2px 2px 20px #c1b7b7;
  }
  input.button {
      font:15px simple CLM;
      width:100px;
      border-style:none;
      border-radius:3px;
  }
  div.sleve {
      background-color: white;
      position: fixed ;
      right:20%;
      left: 20%;
      top: 1px;
      bottom: 1px;
      box-shadow: 0px 5px 20px #c1b7b7;
      border-radius:10px
  }
  div.bar {
      position: absolute;
      right: 20%;
      left: 20%;
      top: 17.5%;
      background-color: #2D95B5;
      font: 100% simple CLM;
      color: white;
      height: 40px;
      border-top-width:1px;
      border-bottom-width:1px;
      border-left-width:0px;
      border-right-width:0px;
      border-style:solid;
      border-color:black;
  }
  td.barbutton {
      width:200px;
      height:35px;
      left:50px;
      right:50px;
      text-align:center;
  }
      td.barbutton:hover {
          background-color: #30A3C6;
      }
  div.register2 {
      position: fixed;
      height: 75%;
      width: 70%;
      left: 15%;
      top: 10%;
      background-color: lightblue;
      border-color: navajowhite;
      box-shadow: 0px 1px 20px 1px #c1b7b7;
      border-radius: 10px;
      opacity: 0;
      font: 125% simple CLM;
  }
  div.register3 {
      position: fixed;
      height: 75%;
      width: 70%;
      left: 15%;
      top: 10%;
      background-color: lightblue;
      border-color: navajowhite;
      box-shadow: 0px 1px 20px 1px #c1b7b7;
      border-radius: 10px;
      opacity: 0;
      display: none;
      font: 125% simple CLM;
  }
  input.text {
      width: 150px;
      height:20px;
      border-style:none;
      border-radius:3px;
      font-size:60%;
      text-align:left          
  }
  input.password {
      width: 150px;
      height: 20px;
      border-style: none;
      border-radius: 3px;
      font-size: 60%;
      text-align:left
  }
      input.button:hover {
          background-color: #EBE7E7;
          border-color: white;
      }
</style>

 <div class="sleve"></div>
 <div class="bar">
     <table>
         <tr>
             <td class="barbutton" onclick="window.location='Main.aspx'">ראשי</td>
             <td class="barbutton">טקסט</td>
             <td class="barbutton">טקסט</td>
             <td class="barbutton">טקסט</td>
             <td class="barbutton">טקסט</td>
             <td class="barbutton" onclick="window.location='Register.aspx'">הירשם</td>


         </tr>

     </table>



 </div>




     <div class="register" id="register1" dir="ltr"  >
         <center style="font-size:150%; margin-top:5%;"><font face="simple clm">הרשמה לאתר</font></center>
         <form action="">
         <table dir="rtl" style="position:relative; margin-top:5%; margin-right:10%; font-size:100%" cellpadding="17.5%" cellspacing="15%;">
             <tr>
                 <td>שם משתמש</td> 
                 <td><input class="text" dir="ltr" id="ID" name="ID" /> <br /><p id="iderror" style="position:absolute; top:11%; color:red; font:65% arial; display:none">חייב להכיל בין 3 עד 16 תווים</p></td>
             </tr>
             <tr>
                 <td>סיסמא</td>
                 <td><input dir="ltr" class="password" type="password" id="PW" name="PW" /><br /><p id="pwerror" style="position:absolute; top:30.5%; color:red; font:65% arial; display:none">חייב להכיל בין 6 עד 24 תווים</p></td>
             </tr>
             <tr>
                 <td>אימייל</td>
                 <td><input class="text" dir="ltr" id="EMAIL" name="EMAIL" /><br /><p id="emailerror" style="position:absolute; top:50%; color:red; font:65% arial; display:none">חובה להכניס אימייל תקין</p></td>
             </tr>
             <tr>
                 <td>שנת לידה</td>
                 <td><input class="text" id="BDyear" maxlength="4" style="width:8%" />&nbsp/&nbsp<input class="text" id="BDmonth" maxlength="2" style="width:5%" />&nbsp/&nbsp<input class="text" id="BDday" maxlength="2" style="width:5%" /><br />
                     <p id="bderror" style="position:absolute; top:70%; color:red; font:65% arial; display:none"> תאריך לידה לא תקין</p>
                     <p id="bderroryoung" style="position:absolute; top:70%; color:red; font:65% arial; display:none"> חובה להיות מעל גיל 13</p>
                 </td>
             </tr>
             <tr>
                 <td colspan="2"><center></center></td>
             </tr>
             <tr>

             </tr>

         </table>
             <input type="button" id="SEND" name="SEND" value="המשך" class="button" onclick="validate()" style="position:absolute; left:50%; bottom:25%" />
           <p style="position:absolute; left:45%; bottom:10%; font-size:medium" >כבר יש לך משתמש? &nbsp<a href="Login.aspx">התחבר</a></p>
         </form>




 </div>

 <div class="register2" id="register2" style="display:none">
     <center style="font-size:150%; margin-top:5%;"><font face="simple clm">עריכת פרופיל</font></center>
     <table style="position:absolute; bottom:30%; right:30%">
         <tr>
             <td></td>
             <td></td>
         </tr>



     </table>
  <form>
     <table dir="rtl" style="position:absolute; right:15%; bottom:15%" cellpadding="15%" cellspacing="20%">

         <tr>
             <td>שם מלא</td>
             <td><input class="text" id="fullname" name="fullname" /></td>
         </tr>
         <tr>
             <td>מין</td>
             <td><input style="height:15px; width:30px" type="radio" id="male" name="gender" value="זכר" />זכר <input type="radio" style="height: 15px; width: 30px" id="female" name="gender" />נקבה</td>
         </tr>
         <tr>
             <td>עיסוקים\תחביבים</td>
             <td><input class="text" id="hobbies" name="hobbies" /></td>
         </tr>
         <tr>
             <td>איזור בארץ</td>
             <td><input class="text" id="livingarea" name="livingarea" /></td>
         </tr>
         <tr>
             <td>קצת על עצמך</td>
             <td><textarea style="width: 200%; height: 100px; border-style: none; border-radius: 3px; font-size: 80%; "></textarea></td>
         </tr>

     </table></form>

     <p style="position: fixed; left: 15.5%; top: 22.5%; width: 20%; font: 100% simple CLM;">תמונת פרופיל</p>
     <img  style="position: absolute; left: 17%; top: 25%; width: 12%; box-shadow: 0px 1px 20px #c1b7b7;" src="img/placeholder.png" />
     <input  class="button" type="button" value="העלה" style="position: fixed; left: 31.5%; top: 45.5%; width: 80px; font: 75% simple CLM;" />
     <input  class="button" type="button" value="קישור" style="position: fixed; left: 26.5%; top: 45.5%; width: 80px; font: 75% simple CLM;" />
     <p  style="position:absolute; right:20%; bottom:10%; font: small arial; color:red">*לא חובה למלא פרטים אלה</p>
     <input  class="button" type="button" style="position:absolute; width:200px; height:30px; right:40%; bottom:5%; font: large simple CLM" value="הירשם" onclick="done()" />
     <input class="button" type="button" style="position:absolute; width:200px; height:30px; right:5%; bottom:5%; font: large simple CLM" value="חזרה" onclick="backwards()" />

 </div>
 <div id="register3" class="register3" >
     <center style="font-size:150%; margin-top:5%;"><font face="simple clm">ההרשמה בוצעה בהצלחה</font></center>
     <center><p id="finishtext" style="margin-top:10%"></p></center>
     <input type="button" class="button" style="position:absolute; left:43%; bottom:20%; width:200px; height:30px" value="חזרה לעמוד הראשי" onclick="location = 'register.aspx'" />

 </div>
    </body

这不包括任何 javascript 函数，如果您单击它也不会执行任何操作。这只是发生的事情的一个例子——全高清用户会完美地看到它，当你降低分辨率时它开始变得不对劲

Answer 1

如果您正在谈论防止 body 低于特定宽度，您可能需要查看 min-width

例如:

html,body{
  width:100%;
  min-width:980px;
}

More from MDN

The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The value of min-width overrides both max-width and width.

如果您正在考虑根据视口(viewport)大小缩放内容，您应该 look at vh or vw units.

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browser are updating the uw3e values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).

如果您希望页面根据大小进行响应 - 最有可能的最佳解决方案是使用 media queries 以帮助您明确规定内容在特定尺寸/分辨率下的显示方式。

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.