我遇到一个问题，当我放大和缩小时，页面布局会变得困惑。我在网上搜索过其他帖子，但没有真正帮助。也许是因为我安排CSS的方式。希望有人能告诉我如何解决这个问题，谢谢。这是之前和之后的样子。
之前
之后
HTML
<body>
<div id="container">
<div style="position:static">
<ul class="items">
<li>ABOUT KDU</li>
<li style="margin-left:30%;">ADMISSION</li>
<img src="kdulogo.png" class="MainImage"
style="position:static;">
<li style="margin-left:60%;">CAMPUS LIFE</li>
<li style="margin-left:75%;">INTERNATIONAL STUDENT</li>
</ul>
</div>
<div id="blocks">
<ul id=" Images">
<li><img src="SCCM.jpg" class="imageSize"></li>
<li><img src="SCCA.jpg" class="imageSize"></li>
<li><img src="SOB.jpg" class="imageSize"></li>
<li><img src="SHTCA.jpg" class="imageSize" style="margin-
left:210px;"></li>
<li><img src="SOE.jpg" class="imageSize"></li>
</ul>
</div>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
user-select: none;
font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans-
serif;
font-weight: bold;
overflow-x: hidden;
}
body{
background: #f5f5f0;
}
.MainImage{
position: relative;
width: 10%;
margin: auto;
display: block;
transition: all .6s linear;
}
.items>li{
color: black;
cursor: pointer;
margin-left: 150px;
position: absolute;
top: 100px;
display: inline;
text-decoration: none;
transition: all .2s linear;
}
.items>li:hover{
text-decoration: underline;
text-decoration-color: black;
transition: all .2s linear;
transform: scale(1.5,1.5);
}
#blocks{
background-color: #262626;
width: 100%;
height: 517;
position: static;
margin-top: 50px;
}
#blocks >ul>li{
display:block;
float:left;
border: 20px;
margin-top: 30px;
margin-left: 80px;
}
#Images{
position: absolute;
display: inline;
}
#Image>li{
position: absolute;
display: block;
}
.imageSize{
cursor: pointer;
width: 340px;
height: 200px;
transition: all .4s linear;
}
.imageSize:hover{
opacity: 0.5;
transition: all .4s linear;
}
#container{
width: 100%;
margin: 0 auto;
最佳答案
它破坏布局的原因是因为您使用了百分比，这意味着当您更改缩放级别时，宽度将被更改以适应页面的新大小，这就是应该发生的情况.
将 CSS 更改为一定程度的修复将有助于解决此问题，但由于其当前的工作方式而无法完全解决所有问题。我建议您将容器 max-width 更改为适合设计的内容作为一个很好的起点。
#container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
但是，然后您可以使用 media queries根据屏幕尺寸更改容器的宽度，这将适本地响应页面尺寸。例如，当平板电脑或手机的屏幕尺寸变小时，您可以执行此操作(作为示例)。
@media screen and (max-width: 1024px) {
#container {
max-width: 960px;
}
}
关于当我放大或缩小时，html 布局困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43424597/