浏览器窗口缩小时HTML元素布局错乱如何固定位置

缩窗后布局错乱是多个基础错误叠加导致的：

1. 视口（viewport）配置写错，浏览器无法正确识别窗口实际宽度
2. HTML结构存在语法错误：未定义<header>开标签却直接写了闭合标签，会触发浏览器自动纠错逻辑打乱DOM结构
3. 容器设置了过大的最小宽度min-width:700px，窗口宽度小于700px时容器会直接溢出，无法适配小尺寸窗口
4. 导航项使用固定外边距，未配置换行规则，小窗口下导航项总宽度超出容器宽度就会错位
5. 图片、内容区块未配置自适应规则，默认按原始尺寸渲染，超出容器后会打乱整体布局
6. 使用了已废弃的<center>标签做居中，现代浏览器对废弃标签的兼容逻辑不稳定，容易出现布局偏差

按以下步骤修改代码即可：

• 修正视口配置
  把<head>里的viewport元标签替换为正确写法，这是响应式布局的基础配置：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 修正HTML结构
  补全<header>开标签，移除废弃的<center>标签，调整后的结构片段如下：

  <div class="Container">
    <div class="title">
      <h2>LUSCIOUS BITES</h2>
    </div>
    <header>
      <p class="choice">
        <a href="#home">HOME</a>
        <a href="#speciality">SPECIALITY</a>
        <a href="#popular">POPULAR</a>
        <a href="#gallery">GALLERY</a>
        <a href="#review">REVIEW</a>
        <a href="#order">ORDER</a>
      </p>
    </header>
  
    <section class="home" id="home">
      <div class="content">
        <h3>food made with love</h3>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
        <a href="#" class="btn">order now</a>
      </div>
      <div class="image">
        <img src="images/home-img.png" alt="food preview">
      </div>
    </section>
  </div>
  

• 替换原有CSS为适配响应式的规则

  * {
    box-sizing: border-box; /* 统一盒模型，padding和border不会撑大元素宽度 */
  }
  body,
  html {
    background-color: #cc9966;
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  
  .Container {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
    position: relative;
  }
  
  .title {
    font-family: Lucida handwriting;
    font-size: 4rem;
    text-align: center;
    color: white;
    text-shadow: 1rem 1rem 5rem black;
  }
  
  /* 导航自适应布局 */
  header .choice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
  }
  
  header .choice a {
    padding: .8rem;
    font-family: Arial;
    font-size: 1rem;
    border: solid rgba(57, 38, 19);
    background: #f9f2ec;
    color: black;
    cursor: pointer;
    border-radius: 1rem;
    position: relative;
    text-decoration: none;
  }
  
  /* home区块自适应 */
  .home {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0;
  }
  .home .content {
    flex: 1 1 300px;
  }
  .home .image {
    flex: 1 1 300px;
  }
  /* 图片自适应，不超出容器 */
  .image img {
    max-width: 100%;
    height: auto;
  }
  
  /* 小屏幕适配 */
  @media (max-width: 768px) {
    .title {
      font-size: 2.2rem;
      text-shadow: 0.5rem 0.5rem 2rem black;
    }
  }
  

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