You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们
文档备案控制台

移动端网页内容过宽问题求助（含HTML/CSS代码）

avatar
阿华AIGC实验室
2026-3-30
移动端网页内容过宽问题求助（含HTML/CSS代码）

提问者问题

各位好，我遇到了一个响应式的问题：在电脑上打开我的网站一切正常，但在手机上打开时，内容宽度远超屏幕分辨率，显示异常。我已经加了媒体查询，但好像没起作用，实在找不到问题出在哪，麻烦大家帮我看看！

问题场景

  • 桌面端显示正常，内容居中且适配屏幕
  • 移动端（比如手机）打开时，内容宽度超出屏幕，需要横向滑动才能看全
  • 已经尝试添加了不同断点的媒体查询，但问题依然存在

我的代码

HTML 代码

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page name</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="wrapper">
      <div class="box">
        <p>
          Lorem ipsum
        </p>
        <hr>
        <p class="domains">
          Lorem ipsum
        </p>
        <p class="impressum">
          Lorem ipsum
        </p>
        <p class="footer">CREDITS<br>
          Lorem ipsum
        </p>
      </div>
    </div>
  </body>
</html>

CSS 代码

@font-face {
  font-family: 'Lemon-Milk';
  src: url('../fonts/lemon-milk.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

html, body {
  height:100%;
}

#wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #000;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/bg.jpg');
}

.box {
  color: #fff;
  width: 1860px;
  margin: auto;
  text-align: center;
}

p {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

.domains {
  font-size: 14px;
  font-family: 'Lemon-Milk', sans-serif;
}

.impressum {
  font-size: 14px;
  padding-top: 20px;
}

em {
  color: #c6ff00;
}

a {
  color: #c6ff00;
  text-decoration: none;
}

hr {
  color: #fff;
  height: 1px;
  width: 1820px;
  border: none;
  margin: 20px auto;
  background-color: #fff;
}

.footer {
  font-size: 12px;
  padding-top: 20px;
}

@media (max-width: 480px) {
  #wrapper {
    background-image: url('../img/bg-480px.jpg');
  }

  .box {
    color: #fff;
    width: 460px;
    margin: auto;
    text-align: center;
  }

  p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .domains {
    font-size: 12px;
    font-family: 'Lemon-Milk', sans-serif;
  }

  .impressum {
    font-size: 12px;
    padding-top: 20px;
  }

  hr {
    width: 400px;
  }

  .footer {
    font-size: 10px;
    padding-top: 20px;
  }
}

@media (max-width: 800px) {
  #wrapper {
    background-image: url('../img/bg-800px.jpg');
  }

  p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .domains {
    font-size: 12px;
    font-family: 'Lemon-Milk', sans-serif;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 760px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1024px) {
  #wrapper {
  background-image: url('../img/bg-1024px.jpg');
  }

  .box {
    width: 1004px;
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 990px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1280px) {
  #wrapper {
  background-image: url('../img/bg-1280px.jpg');
  }

  .box {
    width: 1260px;
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 1200px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1600px) {
  #wrapper {
  background-image: url('../img/bg-1600px.jpg');
  }

  .box {
    width: 1500px;
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 1480px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

专家解答

嘿，我看了你的代码，问题其实出在两个核心点上，都是和固定宽度以及媒体查询顺序有关，咱们一步步来解决：

1. 媒体查询顺序写反了！

你现在的媒体查询是从最小的断点（480px）开始往大的写，但CSS是层叠优先级——后面的规则会覆盖前面的。比如当屏幕宽度是600px时，它会同时触发max-width:800px和max-width:480px，但因为800px的查询写在后面，所以会覆盖480px的规则。而你在800px的媒体查询里没有重新设置.box的宽度，所以.box还是用了默认的1860px，这直接导致屏幕小于800px但大于480px时，内容直接超出屏幕！

正确的做法是从大到小写媒体查询：先写最大的断点（比如max-width:1600px），然后依次往小的写（1280px、1024px、800px、480px），这样小屏幕的规则才不会被大屏幕的覆盖。

2. 固定宽度应该换成相对单位，限制最大宽度而非强制固定宽度

你现在的.box和hr用的都是固定像素宽度（比如默认1860px），这在小屏幕上肯定会超出。更合理的做法是：

  • 给.box设置max-width: 1860px（最大宽度不超过你想要的1860px），同时加width: 100%（自适应屏幕宽度）
  • hr也设置max-width: 1820px，搭配width: 100%，这样它会自适应父容器的宽度，又不会超过你想要的最大宽度
  • 给.box加padding: 0 20px，避免小屏幕上内容直接贴在屏幕边缘，提升体验

修复后的关键代码示例

我把核心修改部分整理出来了，你可以直接替换到你的CSS里：

/* 基础样式中的.box和hr修改 */
.box {
  color: #fff;
  max-width: 1860px; /* 最大宽度不超过1860px */
  width: 100%; /* 自适应屏幕宽度 */
  margin: auto;
  text-align: center;
  padding: 0 20px; /* 左右内边距，避免内容贴边 */
}

hr {
  color: #fff;
  height: 1px;
  max-width: 1820px; /* 最大宽度不超过1820px */
  width: 100%; /* 自适应父容器宽度 */
  border: none;
  margin: 20px auto;
  background-color: #fff;
}

/* 媒体查询调整为从大到小的顺序 */
@media (max-width: 1600px) {
  #wrapper {
  background-image: url('../img/bg-1600px.jpg');
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1280px) {
  #wrapper {
  background-image: url('../img/bg-1280px.jpg');
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1024px) {
  #wrapper {
  background-image: url('../img/bg-1024px.jpg');
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 800px) {
  #wrapper {
    background-image: url('../img/bg-800px.jpg');
  }

  p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .domains {
    font-size: 12px;
    font-family: 'Lemon-Milk', sans-serif;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 480px) {
  #wrapper {
    background-image: url('../img/bg-480px.jpg');
  }

  p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .domains {
    font-size: 12px;
    font-family: 'Lemon-Milk', sans-serif;
  }

  .impressum {
    font-size: 12px;
    padding-top: 20px;
  }

  .footer {
    font-size: 10px;
    padding-top: 20px;
  }
}

修复逻辑说明

  • 媒体查询顺序从大到小：确保小屏幕的样式优先级更高，不会被大屏幕的规则覆盖
  • 用max-width + width:100%替代固定宽度：元素会自适应当前屏幕宽度，同时不会超过你预设的最大宽度，完美适配各种设备
  • 添加左右内边距：优化小屏幕的视觉体验，避免内容和屏幕边缘紧挨着

你可以试试这个修改后的代码，移动端的横向滚动问题应该就能解决了！如果还有细节需要调整，咱们再继续聊~

火山引擎 最新活动

方舟 Coding Plan

HOT

模型自由，工具不限，最新支持 DeepSeek-V4 系列与 GLM-5.1，受邀下单叠加9.5折

查看详情

ArkClaw

7×24在线专属智能伙伴

查看详情

Seedance 2.0 全面开放 API

创作无限可能，一键生成电影级 AI 视频

查看详情

新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

查看详情