配置@media选择器后，屏幕≤768px时样式未按预期生效，求原因

场景复现 #

我们有如下静态HTML页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root">
      <p class="home-paragraph">
        Some very long text for testing the way the text will appear on different sized screens.
      </p>
    </div>
  </body>
</html>

初始CSS规则：

.home-paragraph {
  margin: 0 auto;
  max-width: 65%;
}

为了在屏幕宽度≤768px时修改样式，添加了媒体查询：

.home-paragraph {
  margin: 0 auto;
  max-width: 65%;
}

@media screen and (max-width: 768px) {
  .home-paragraph {
    margin: 0 auto;
    padding: 0em 2em;
  }
}

问题：将屏幕尺寸调整至768px或更小时，样式未发生明显变化，原因是什么？

原因分析 #

1. 原有max-width规则未被覆盖：媒体查询中没有修改max-width: 65%，这条规则会继续生效。在小屏幕下，元素依然保持65%的最大宽度，同时新增的左右padding会进一步压缩内容显示空间，但这种变化不够直观，容易让人误以为样式没生效。
2. 样式变化视觉差异小：仅添加padding的调整，在部分场景下和原有布局的视觉区别不明显，容易被忽略。

解决办法 #

根据需求修改媒体查询中的样式，比如移除max-width限制，让元素在小屏幕下占满可用宽度，同时保留padding，变化会非常明显：

.home-paragraph {
  margin: 0 auto;
  max-width: 65%;
}

@media screen and (max-width: 768px) {
  .home-paragraph {
    max-width: 100%; /* 覆盖原有最大宽度 */
    padding: 0 2em;
  }
}

如果希望保留一定的最大宽度，也可以调整max-width的值，配合padding让布局变化更清晰：

.home-paragraph {
  margin: 0 auto;
  max-width: 65%;
}

@media screen and (max-width: 768px) {
  .home-paragraph {
    max-width: 90%;
    padding: 0 1em;
  }
}

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