如何用CSS实现HTML元素适配100%视口且缩放时正常放大

你遇到的是vw单位的固有特性：100vw始终对应当前视口的CSS宽度，浏览器缩放时视口CSS宽度会同步变小，所以元素会始终铺满视口，不会跟随放大。你要实现「初始宽度适配视口，缩放时同步放大」的效果，有两种可落地的方案：

方案1：JS动态计算固定初始宽度（最通用，适配所有设备） #

只需要在页面初始化时执行一次代码，就能自动计算出你需要的x值，同时适配任意设备的初始视口宽度：

用rem单位的实现代码 #

// 取初始视口宽度
const initialViewportWidth = document.documentElement.clientWidth
// 取根元素font-size计算rem和px的换算比例
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
const x = initialViewportWidth / rootFontSize
// 给body设置宽度
document.body.style.width = `${x}rem`

不需要rem的更简单实现 #

如果没有强制用rem的要求，直接固定初始宽度为px值即可，效果完全一致：

document.body.style.width = `${document.documentElement.clientWidth}px`

两种写法都可以在缩放时，因为单位是固定的rem/px，跟随浏览器缩放比例同步放大。

方案2：纯CSS实现（适合内容不超过初始视口的场景） #

如果你的页面内容本身宽度不会超过初始视口，不需要写JS也可以实现需求：

body {
  width: fit-content;
  min-width: 100vw;
}

原理是让body的最小宽度等于初始视口，实际宽度由内容撑开，缩放时内容放大，body宽度会同步变大。

注意项 #

如果是移动端页面，要确保已经加了标准的viewport元标签，否则所有视口相关单位的计算都会出错：

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

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