移动端

vw 适配

vw 方案的核心思想是：将设计稿的宽度等分为 100 份，那么 1vw 就对应设计稿宽度的 1%。页面上所有元素的尺寸（宽度、高度、内外边距、字体大小等）都用 vw 单位来表示。

具体方案：

设置 Viewport Meta 标签:

这是移动端 Web 开发的基础，确保页面宽度等于设备宽度，并且不允许用户缩放（或者根据需求设置）。

html

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

确定设计稿基准宽度:

选择一个主流的移动设备宽度作为设计稿的标准，例如 iPhone 6/7/8 的 375px，或者常用的 750px（物理像素，对应 375px 逻辑像素的 @2x 屏）。

将 px 转换为 vw

vw = (元素在设计稿上的 px 值 / 设计稿宽度 px 值) \* 100 vw

例如，假设设计稿宽度是 375px，设计稿上有一个宽度为 100px 的 div。

css

(100 / 375) * 100vw ≈ 26.6667vw。

使用自动化工具

PostCSS 插件 (postcss-px-to-viewport): 这是目前最流行和推荐的方式。

通常在 postcss.config.js 或构建工具配置中:

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位，默认为 px
      viewportWidth: 375, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度（小数位数）
      propList: ['*'], // 能转化为 vw 的属性列表，['*'] 表示所有属性都转化
      viewportUnit: 'vw', // 指定需要转换成的视口单位，建议 vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视口单位，建议 vw
      selectorBlacklist: [], // 指定不转换为视口单位的类名，可以正则
      minPixelValue: 1, // 设置最小的转换数值，如果小于 1px 则不转换
      mediaQuery: false, // 是否在媒体查询的 css 代码中也进行转换，默认 false
      replace: true, // 是否转换后直接更换属性值，而不添加备用属性
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
      landscape: false, // 是否处理横屏情况
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 667, // 横屏时使用的视口宽度 (假设基于 375px 设计稿的横屏)
    },
  },
}

编写 CSS

CSS

/* 输入（设计稿尺寸） */
.box {
  width: 200px;
  height: 100px;
  font-size: 28px;
  margin: 20px;
}

/* 输出（自动转换） */
.box {
  width: 26.66667vw;   /* 200 / 750 * 100vw */
  height: 13.33333vw;  /* 100 / 750 * 100vw */
  font-size: 3.73333vw; /* 28 / 750 * 100vw */
  margin: 2.66667vw;   /* 20 / 750 * 100vw */
}

注意事项：

字体大小问题：如果字体大小也完全使用 vw，在非常宽的屏幕（如平板横屏）上字体可能会变得过大，在非常窄的屏幕上字体可能变得过小，影响阅读体验。
- 使用 clamp() 函数（CSS 新特性，兼容性需注意）：font-size: clamp(12px, 4.2667vw, 18px); (设置最小 12px，最大 18px，中间根据 vw 缩放)。
- 在 postcss-px-to-viewport 中配置 fontViewportUnit 为 rem（如果项目使用 rem 方案）或者通过 propList 排除 font-size 等属性，单独处理字体。
对大屏幕（平板/桌面）的适配：纯 vw 方案主要是针对移动端宽度适配。如果页面也需要在平板或桌面上展示，完全按宽度比例缩放可能导致布局过于拉伸或元素过大。
- 媒体查询：在较大的视口宽度下，设置 max-width 限制主体内容宽度，或者使用不同的布局方式 (如 Grid, Flexbox 结合固定/百分比宽度)。
处理 1px 边框
- 可以使用伪元素 + transform: scaleY(0.5) 的方式模拟 0.5px 线条，

优势：

真正的相对单位： vw 完全是相对于视口宽度的，当视口宽度变化时，所有用 vw 定义的尺寸都会按比例自动缩放，从而在不同宽度的设备上保持布局的一致性和视觉比例。
适配范围广：理论上，一套 vw 单位的 CSS 代码可以适配所有宽度的移动设备屏幕，省去了写大量媒体查询 (Media Queries) 来适配特定断点的麻烦。
实现简单：概念清晰，转换逻辑直接。

移动端 ​

vw 适配 ​

移动端

vw 适配