设置为rem单位的宽度未按预期响应式缩放问题排查

我首次尝试使用rem单位构建响应式页面，将根元素html的font-size设置为16px，容器宽度设为80rem。代码如下：

html {
  font-size: 16px;
}

.container {
  width: 80rem;
}

我理解80rem应等于80*16px=1280px，但调整浏览器窗口大小时，容器宽度固定为1280px，无法响应式缩小。我遗漏了什么？我以为为html设置像素字体大小是rem实现响应式缩放的正确方式？

核心问题是你把根元素的font-size固定成了16px——rem的计算完全依赖根元素字体大小，根元素大小不变，rem换算后的px值也不会变，容器宽度自然就固定死了。

要让rem实现响应式缩放，得让根元素的font-size随视口变化，常用两种方案：

• 媒体查询调整根元素字号：针对不同视口宽度，修改html的font-size，让rem的基准值动态变化：

html {
  font-size: 16px;
}

/* 视口小于1280px时缩小根字号 */
@media (max-width: 1279px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 1023px) {
  html {
    font-size: 12px;
  }
}

.container {
  width: 80rem;
}

视口变小时，根元素字号减小，80rem对应的px值也会同步缩小，容器就能自适应。

• 用vw单位动态设置根字号：vw是视口宽度的百分比单位，1vw=视口宽度的1%。把根元素font-size设为与视口挂钩的vw值，就能实现平滑的响应式缩放：

/* 以设计稿宽度1200px为例，16px对应1.333vw */
html {
  font-size: 1.333vw;
}

.container {
  width: 80rem;
}

这种方式不用写大量媒体查询，缩放效果更连贯。

另外，也可以给容器加兜底样式，避免小屏上横向溢出：

.container {
  width: 80rem;
  max-width: 100%;
  margin: 0 auto;
}

当视口宽度小于1280px时，容器会自动占满视口宽度，不会超出屏幕。

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