Question

用户放大或缩小时如何避免销毁设计网页，当我查看其他网站时，当我缩小或放大时，他们的设计不会被打破这是我的代码

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
<title>Personal Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body  >
<table border="0"width="100%" height="100">
<tr>
<td align="left" width="25%"> <img src="compas.png" width="150" height="150" ></td>
<td align="right"  valign="top" width="40%"  ><img src="scrol.png" width="120" height="120"><p id="text1">Home</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text2">About</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text3">Photos</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text4">Hobbies</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text5">Qbook</p></td>
</tr>
<tr>
<td align="left" ><font face="old english text mt"><font size="6"><b>Personal Page</b></font></td>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>

这是css

body { 
background: url('background.jpg') no-repeat center center fixed;
  background-size: cover;
} 
table {
    table-layout: fixed;
}

#text1
{
    position:absolute;    
    font-size:18px;
    font-weight:bold;
    left:790px;
    top:40px;
}
#text2
{
    position:absolute;    
    font-size:18px;
    font-weight:bold;
    left:914px;
    top:40px;
}
#text3
{
    position:absolute;    
    font-size:18px;
    font-weight:bold;
    left:1029px;
    top:40px;
}
#text4
{
    position:absolute;    
    font-size:18px;
    font-weight:bold;
    left:1141px;
    top:40px;
}
#text5
{
    position:absolute;    
    font-size:20px;
    font-weight:bold;
    left:1264px;
    top:37px;
}

我必须添加的内容以及我必须更改的内容，请指导我

Answer 1

针对您的问题的简单解决方案 使用像素，其中百分比提供宽度。您正在使用百分比样式为 table和td 标记提供宽度，这在网页设计中是不推荐的。该页面看起来很破碎，因为在缩放时，任何系统的百分比宽度都是固定的，但文本和其他对齐方式在缩放时依赖于像素样式。 因此请将整个页面的固定像素宽度细分为所需部分（以像素样式）

作为上面代码的一个示例，使用1380px作为默认宽度，因为一般系统屏幕有1380px（你可能会有不同）： -

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
<title>Personal Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body  >
<table border="0" width="1380px" align="center" height="100">
<tr>
<td align="left" width="write pixel"> <img src="compas.png" width="150" height="150" ></td>
<td align="right"  valign="top" width="40%"  ><img src="scrol.png" width="120" height="120"><p id="text1">Home</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text2">About</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text3">Photos</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text4">Hobbies</p></td>
<td align="right"  valign="top"><img src="scrol.png" width="120" height="120"><p id="text5">Qbook</p></td>
</tr>
<tr>
<td align="left" ><font face="old english text mt"><font size="6"><b>Personal Page</b></font></td>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>

* css文件很好（无需更改），缩放上面编码的html页面，它看起来不会破碎。

Answer 2

如果您使用百分比的体宽，请确保在body标签上指定最大宽度，这将启用正确的页面放大和缩小功能。

用户放大或缩小时避免破坏设计网页

2 个答案: