媒体查询失效、页面不响应，HTML/CSS新手求助技术指导

Hey there! 作为刚上手HTML/CSS的新手，把PSD转成网页时踩响应式的坑太正常了，我来帮你拆解下你遇到的问题，一步步解决～

1. 先补上最关键的viewport元标签 #

这是很多新手容易忽略的核心点！移动端浏览器默认会把页面按照桌面宽度（比如980px）来渲染，导致你设置100%宽度后还是会出现横向空白或者布局错乱。你需要在HTML的<head>里加上这行代码：

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

它的作用是告诉浏览器：用设备的实际宽度作为页面宽度，初始缩放比例为1，这样页面才能真正适配不同屏幕尺寸。

2. 固定宽度是布局崩溃的元凶 #

你给.content设置了固定的width: 1250px，在屏幕宽度小于1250px的时候，这个容器会直接超出视口宽度，导致右侧空白或者横向滚动条。改成最大宽度+自适应宽度就可以解决：

.content {
  width: 100%; /* 小屏幕下自动占满宽度 */
  max-width: 1250px; /* 大屏幕下最多显示1250px宽度 */
  margin: 0 auto; /* 保持容器居中 */
  box-sizing: border-box; /* 重要！防止padding/border撑破容器 */
}

同时，给所有元素全局设置box-sizing，避免padding或border导致元素总宽度溢出：

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

这样不管你给元素加多少padding或border，它的总宽度都不会超过你设置的width值，不会出现莫名的溢出。

3. 媒体查询不工作？检查这几个细节 #

如果你的媒体查询没生效，大概率是这几个原因：

• 媒体查询的位置不对：CSS是从上到下解析的，媒体查询必须写在常规样式的后面，不然会被前面的样式覆盖。比如：

  /* 先写常规屏幕下的样式 */
  .body-container {
    padding: 20px;
  }
  /* 再写小屏幕的媒体查询 */
  @media (max-width: 768px) {
    .body-container {
      padding: 10px;
    }
  }
  

• 断点设置不合理：比如你设置的断点比当前屏幕宽度大，媒体查询就不会触发。比如你的手机屏幕是375px，却写了@media (max-width: 300px)，自然不会生效。
• 语法错误：检查有没有写错@media的语法，比如括号、大括号有没有配对，单位有没有写错（比如把px写成pt）。

4. 排查其他导致右侧空白的原因 #

如果还是有右侧空白，打开浏览器开发者工具（按F12），选中右侧空白区域，看看是哪个元素导致的溢出：

• 有没有元素用了固定的左右margin/padding，比如margin-left: 60px; margin-right: 60px;，小屏幕下总宽度会超过100%；
• 有没有元素用了position: absolute，但设置了超出视口的right/left值；
• 有没有图片、视频这类元素没设置max-width: 100%，导致超出容器。

按照上面的步骤改完，应该就能解决你的布局崩溃和媒体查询问题啦～

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