Javascript 改变物体位置的分辨率

我试着为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>

分区登记册{
边框样式：隐藏；
位置：绝对位置；
右：20.1%；
左：20.1%；
最高：25%；
底部：5%；
背景颜色：浅蓝色；
边界半径：5px；
字体：150%简单CLM；
盒影：2px20px#c1b7b7；
}
输入按钮{
字体：15px简单CLM；
宽度：100px；
边框样式：无；
边界半径：3px；
}
斯莱夫分区{
背景色：白色；
位置：固定；
右：20%；
左：20%；
顶部：1px；
底部：1px；
盒影：0px 5px 20px#c1b7b7；
边界半径：10px
}
酒吧{
位置：绝对位置；
右：20%；
左：20%；
最高：17.5%；
背景色：#2D95B5；
字体：100%简单CLM；
颜色：白色；
高度：40px；
边框顶部宽度：1px；
边框底宽：1px；
边框左宽度：0px；
右边框宽度：0px；
边框样式：实心；
边框颜色：黑色；
}
巴布顿{
宽度：200px；
高度：35px；
左：50px；
右：50px；
文本对齐：居中；
}
巴布顿：悬停{
背景色：#30A3C6；
}
部门登记员2{
位置：固定；
身高：75%；
宽度：70%；
左：15%；
排名前10%；
背景颜色：浅蓝色；
边框颜色：纳瓦霍白色；
盒影：0px 1px 20px 1px#c1b7b7；
边界半径：10px；
不透明度：0；
字体：125%简单CLM；
}
部门登记员3{
位置：固定；
身高：75%；
宽度：70%；
左：15%；
排名前10%；
背景颜色：浅蓝色；
边框颜色：纳瓦霍白色；
盒影：0px 1px 20px 1px#c1b7b7；
边界半径：10px；
不透明度：0；
显示：无；
字体：125%简单CLM；
}
input.text{
宽度：150px；
高度：20px；
边框样式：无；
边界半径：3px；
字体大小：60%；
文本对齐：左对齐
}
输入密码{
宽度：150px；
高度：20px；
边框样式：无；
边界半径：3px；
字体大小：60%；
文本对齐：左对齐
}
输入。按钮：悬停{
背景色：#EBE7E7；
边框颜色：白色；
}

ראשי
טקסט
טקסט
טקסט
טקסט
הירשם
הרשמה לאתר
שם משתמש 


סיסמא


אימייל


שנת לידה
 / / 


位置：绝对；顶部：70%；颜色：红色；字体：65%arial；显示：无
 
עריכת פרופיל
שם מלא
מין
זכר נקבה
עיסוקים\תחביבים
איזור בארץ
קצת על עצמך


ההרשמה בוצעה בהצלחה

如果要防止
主体
低于某个宽度，您可能需要查看
最小宽度

例如：


min width CSS属性用于设置给定对象的最小宽度
元素。它可以防止宽度属性的已用值丢失
小于为“最小宽度”指定的值

“最小宽度”的值将覆盖“最大宽度”和“宽度”

如果您正在考虑根据视口大小缩放内容，则应该

视口百分比长度定义了相对于视口大小的长度
视口，即文档的可见部分。只有
基于Gecko的浏览器正在动态更新uw3e值，当
修改视口的大小（通过修改窗口的大小）
在台式计算机上或通过在电话上打开设备
 <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

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