如何实现网页在PC端两侧显示带不同背景色的留白，移动端自动移除该留白？

嘿，这个问题太常见啦，刚上手响应式设计很容易碰到！我给你整个简单易懂的方案，保证新手也能快速搞定～

首先，你之前直接给body设固定55%宽度的问题在于：这个样式不管屏幕多大都会生效，所以移动端也会保留窄窄的主体宽度，导致内容挤在一起不好读。咱们可以用CSS媒体查询来实现「不同屏幕大小用不同样式」的效果，具体步骤如下：

1. 调整基础样式（PC端效果） #

先把页面基础布局搭好，让PC端显示你想要的蓝色留白+居中主体效果：

/* 给整个页面的背景设为蓝色，也就是两侧留白的颜色 */
html {
  background-color: #2196F3; /* 这里替换成你想要的蓝色值就行 */
}

/* 主体内容区域 */
body {
  width: 55%; /* PC端主体宽度 */
  margin: 0 auto; /* 让主体水平居中，两侧自然留出蓝色背景 */
  background-color: #ffffff; /* 主体内容的背景色，比如白色 */
  padding: 20px; /* 给内容加内边距，避免文字贴边 */
  box-sizing: border-box; /* 让padding包含在宽度里，防止主体变宽溢出 */
}

这样设置后，PC端就会出现「蓝色背景/白色主体/蓝色背景」的效果，完全符合你的需求～

2. 添加媒体查询（移动端适配） #

接下来用媒体查询，当屏幕宽度小于某个阈值（比如768px，这是常用的移动端断点，你也可以改成自己需要的数值）时，让主体占满整个屏幕：

/* 当屏幕宽度 ≤768px 时，应用下面的移动端样式 */
@media (max-width: 768px) {
  body {
    width: 100%; /* 移动端主体占满屏幕，留白自动消失 */
    padding: 15px; /* 可以适当调小内边距，适配小屏幕 */
  }
}

这样一来，用户用手机访问时，body就会自动铺满屏幕，内容阅读体验立刻变好～

3. 别忘了加Viewport标签！ #

这一步超级重要，很多新手会漏掉：在HTML的<head>标签里添加viewport元标签，让移动端浏览器正确识别屏幕宽度，不然媒体查询可能不会生效：

<head>
  <!-- 其他meta标签、样式表链接... -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

这个标签的作用是告诉浏览器：页面宽度要和设备屏幕宽度一致，初始缩放比例为1.0，确保样式能正确适配不同设备。

额外小提示 #

• 如果你觉得768px这个断点不合适，可以改成其他数值，比如600px或者992px，根据你的设计需求调整就行。
• 要是你的页面内容放在单独的容器里（比如一个<div class="container">），也可以把宽度和媒体查询应用到这个容器上，而不是body，这样结构会更灵活～

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