我已经尝试为身体标签制作一个固定的宽度，但它似乎不像其他人那样工作......我显然做错了什么。 我的问题是：如何使屏幕不缩小并导致物体不合适 通过最小化屏幕还是使用较低的分辨率？
我尝试使用百分比，因为它目前但它没有完美无缺。 如果你想在这里自己查看页面，那就是
<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%" /> / <input class="text" id="BDmonth" maxlength="2" style="width:5%" /> / <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" >כבר יש לך משתמש?  <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函数，如果单击则不会执行任何操作。它只是一个事实的例子 - 全高清用户将完美地看到它，当你取消分辨率时，它开始变得不合适
答案 0 :(得分：1)
如果您正在谈论防止body低于某个宽度，您似乎可能需要查看min-width
E.g：
html,body{
width:100%;
min-width:980px;
}
min-width CSS属性用于设置给定的最小宽度 元件。它会阻止width属性的使用值 变得小于为min-width指定的值。
min-width的值会覆盖max-width和width。
如果您正在考虑根据视口大小缩放内容，那么您应该look at vh or vw units.
视口百分比长度定义了相对于大小的长度 视口，即文档的可见部分。只要 基于Gecko的浏览器正在动态更新uw3e值 修改视口的大小（通过修改窗口的大小 在台式计算机上或通过手机或电话转动设备 片）。
如果您希望页面具有反应性，具体取决于尺寸 - 最有可能的解决方案是使用 media queries ，以帮助您明确规定内容在特定尺寸下的显示效果/分辨率。
媒体查询由媒体类型和至少一个表达式组成 这限制了样式表＆＃39;范围通过使用媒体功能，如 宽度，高度和颜色。在CSS3中添加的媒体查询让 内容的呈现可以根据特定的输出范围进行调整 设备无需自行更改内容。