桌面端正常的HTML/CSS页面移动端适配问题求助

你的代码在移动端异常的核心问题是缺少移动端适配基础配置，以及使用了大量固定尺寸的内联样式，下面是具体修复步骤：

• 添加Viewport元标签：这是移动端适配的核心，告诉浏览器按设备宽度渲染页面，必须放在<head>最顶部：

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

• 响应式Grid布局：原代码固定4列，移动端空间不足会导致内容挤压错位，用媒体查询在小屏幕下切换为单列布局：

  .container {
    width: 100%; /* 替换100vw，避免横向滚动条 */
    min-height: 100vh; /* 替换100vh，适配移动端动态高度（比如地址栏变化） */
    font-family: 'Quicksand',sans-serif;
    font-weight: bold;
    font-size: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    box-sizing: border-box;
    padding: 1rem; /* 加内边距避免内容贴边 */
    align-items: center; /* 垂直居中内容 */
  }
  
  /* 屏幕宽度小于768px时触发移动端布局 */
  @media (max-width: 768px) {
    .container {
      grid-template-columns: 1fr; /* 改为单列 */
      gap: 2rem; /* 增加内容间距，提升可读性 */
      text-align: center; /* 移动端文本居中对齐 */
    }
  }
  

• 移除固定尺寸的内联样式：内联的margin-left:390px、width:400px都是固定像素值，在小屏幕上会溢出或错位，改用自适应规则：

  • 图片设置max-width:100%; height:auto;，确保在任何容器内都能自适应缩放
  • 用Grid的对齐属性（如align-items）代替固定margin实现垂直居中，不要硬写像素值

• 优化文本排版：移动端缩小标题字号，移除强制换行的<br>，让文本自动适配容器宽度换行

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wanderer</title>
  <style>
    body{
      margin: 0;
    }

    .container {
      width: 100%;
      min-height: 100vh;
      font-family: 'Quicksand',sans-serif;
      font-weight: bold;
      font-size: 20px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      box-sizing: border-box;
      padding: 1rem;
      align-items: center;
    }

    .content-large .title {
      font-size: 40px;
    }

    .content-large p {
      font-size: 12px;
      line-height: 1.5;
      margin: 0;
    }

    .content-large img {
      max-width: 100%;
      height: auto;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
      }

      .content-large .title {
        font-size: 30px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="content-large">
    <img src="images/tribe-wanderer.png" alt="Tribe Wanderer">
  </div>
  <div class="content-large">
    <div class="title">Wanderer</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
  </div>
  <div class="content-large">
    <img src="images/IMG_5499.jpg" alt="Wanderer Image">
  </div>
</div>
</body>
</html>

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