如何避免网页缩放时布局变形？HTML/CSS新手求助

我上周刚开始学习HTML和CSS，正在制作我的第一个网站。目前在维持固定显示上遇到了问题：当网页缩放比例低于100%时，所有元素都贴在屏幕右侧；当缩放比例高于100%时，所有元素挤在一起。

核心问题是使用固定像素值设置宽度和定位，且未做响应式适配，导致页面在不同缩放比例或屏幕尺寸下布局错乱：

• 给#TopBar、#View等元素设置固定像素宽度（如1365px、1386px），缩放时无法自适应屏幕
• 大量使用position: absolute和固定left/top值，元素位置完全固定，无法随屏幕调整
• HTML中使用了无效的自定义标签<liv>，标准写法应为<li>

1. 替换固定宽度为百分比/自适应宽度 #

将固定像素宽度改为百分比，或给容器设置max-width限制最大宽度，同时允许自适应缩小：

• 导航栏宽度设为width: 100%，用max-width限制最大宽度避免过宽
• 图片使用max-width: 100%，保证不会超出容器范围

2. 用Flexbox重构自适应布局 #

用Flexbox替代inline-block和绝对定位，实现元素自动分配空间：

• 导航栏设置display: flex，通过align-items: center垂直居中元素
• 用margin-left: auto将登录按钮推到右侧，避免固定偏移

3. 替换绝对定位为流式布局 #

大面积绝对定位会导致布局僵化，改用流式布局或Flex/Grid控制模块位置，用margin控制间距而非固定坐标。

CSS部分 #

/* 基础重置，清除默认边距内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#TopBar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  height: 80px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: white;
  box-shadow: 0px 5px 0px rgb(43, 123, 189);
  padding: 0 20px;
}

#Logo {
  font-size: 40px;
  font-weight: bolder;
  color: rgb(43, 123, 189);
  margin-right: 40px;
}

#Links {
  display: flex;
  list-style: none;
  gap: 30px;
}

#Links li {
  font-weight: bold;
  font-size: 15px;
  padding: 25px 13px;
}

#Links li:hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
}

#Links li:active {
  background-color: rgb(200, 200, 200);
}

#AuthButtons {
  margin-left: auto;
  display: flex;
  gap: 15px;
}

#Log {
  border: none;
  color: white;
  font-weight: bold;
  font-size: 20px;
  width: 140px;
  height: 42px;
  border-radius: 20px;
  background-color: rgb(43, 123, 189);
}

#Log:hover {
  color: rgb(43, 123, 189);
  background-color: white;
  border: solid 2px rgb(43, 123, 189);
  transition: background-color 0.1s;
}

#Log:active {
  opacity: 0.5;
}

#Sign {
  border: none;
  color: black;
  font-weight: bold;
  font-size: 20px;
  width: 140px;
  height: 42px;
  border-radius: 20px;
  background-color: rgb(230, 230, 230);
}

#Sign:hover {
  color: black;
  background-color: white;
  border: solid 2px black;
  transition: background-color 0.1s;
}

#Sign:active {
  opacity: 0.5;
}

#HeroSection {
  position: relative;
  margin-top: 80px;
}

#View {
  width: 100%;
  max-width: 1400px;
  height: 550px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  box-shadow: 0px 15px 20px rgb(200, 200, 200);
}

#Message {
  position: absolute;
  top: 150px;
  left: 40px;
  max-width: 400px;
}

#MessageTitle {
  color: white;
  font-weight: bolder;
  font-size: 40px;
  margin-bottom: 15px;
}

#MessageParagraph {
  color: white;
  font-size: 20px;
  margin-bottom: 30px;
}

#Join {
  color: white;
  font-weight: bold;
  border: none;
  width: 350px;
  max-width: 100%;
  height: 50px;
  border-radius: 25px;
  font-size: 20px;
  background-color: rgb(43, 123, 189);
}

#Join:hover {
  color: rgb(43, 123, 189);
  background-color: white;
  border: solid 2px rgb(43, 123, 189);
  transition: background-color 0.1s;
}

#Join:active {
  opacity: 0.5;
}

#ContentSection {
  max-width: 1400px;
  margin: 50px auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

#code {
  flex: 1;
  min-width: 300px;
  height: 500px;
  object-fit: contain;
}

#Selection {
  flex: 1;
  min-width: 300px;
}

#SelectionTitle {
  font-weight: bolder;
  font-size: 40px;
  margin-bottom: 15px;
}

#SelectionParagraph {
  font-size: 20px;
  margin-bottom: 30px;
}

#offers {
  border: none;
  font-size: 20px;
  font-weight: bolder;
  background-color: rgb(230, 230, 230);
  width: 400px;
  max-width: 100%;
  height: 50px;
  border-radius: 25px;
}

#offers:hover {
  color: black;
  background-color: white;
  border: solid 2px black;
  transition: background-color 0.1s;
}

#offers:active {
  opacity: 0.5;
}

HTML部分 #

<body>
  <div id="TopBar">
    <p id="Logo"> Osolu </p>
    <ul id="Links">
      <li><a>Tutor</a></li>
      <li><a>Contact</a></li>
      <li><a>Courses</a></li>
      <li><a>Finance</a></li>
      <li><a>Testing</a></li>
      <li><a>More</a></li>
    </ul>
    <div id="AuthButtons">
      <button id="Log">Log In</button>
      <button id="Sign">Sign Up</button>
    </div>
  </div>

  <div id="HeroSection">
    <img src="https://www.digitalgravity.ae/blog/wp-content/uploads/2022/03/Web-Development.jpg" id="View" />
    <div id="Message">
      <p id="MessageTitle"> Achieve Success</p>
      <p id="MessageParagraph">
        With everything you child needs in one place to achieve success in their pursuit of computer science and technology, Osolu is the perfect place to them to master a variety of languages, learn important coding concepts, and dive deep into the expansive
        world of website development
      </p>
      <button id="Join"> Start Your Journey </button>
    </div>
  </div>

  <div id="ContentSection">
    <img src="https://gowithcode.com/wp-content/uploads/2021/04/top-programming-languages.jpg" id="code">
    <div id="Selection">
      <p id="SelectionTitle">Explore a Variety</p>
      <p id="SelectionParagraph">
        With everything you child needs in one place to achieve success in their pursuit of computer science and technology, Osolu is the perfect place to them to master a variety of languages, learn important coding concepts, and dive deep into the expansive
        world of website development
      </p>
      <button id="offers"> See What We Offer</button>
    </div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Zixon