视频讲解：移动端适配视频（必看）

viewport - 视图、视窗

移动端设备中，整块显示屏就相当于视图、视窗。

在移动端设备中，浏览器视图并不是整个屏幕。因此viewport又被分为了3种：layout viewport、visual viewport、ideal viewport。

layout viewport

大部分浏览器把viewport的宽度设为了980px，这个浏览器默认设置的视图被称为layout viewport。我们可以使用 document.documentElement.clientWidth 来获取。

visual viewport

layout viewport的宽度是远大于浏览器宽度的，因此我们需要一个新的viewport来代表浏览器的可视区域宽度，这个视图则被成为visual viewport。我们可以使用 window.innerWidth 来获取。

ideal viewport

现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的ideal viewport。

viewport的单位 vw、vh

vw、vh将viewport分成了一百份。vw即 viewport width，vh即 viewport height。

• 1vw 等于视图单位的1%的宽度
• 1vh 等于视图单位的1%的高度
• 如果设计稿的视图为375px，那么1vw 等于 3.75px

使用 postcss-px-to-viewport 适配

要使用viewport适配，我们必须安装 postcss-px-to-viewport 这个包。这个包和 postcss-pxtorem 类似。

不仅名字相似，功能也有相似的地方：

• postcss-pxtorem 是将 px 单位转换为 rem 单位
• postcss-px-to-viewport 则是将 px 单位转换为 vw、vh

1
2

# 引入 postcss-px-to-viewport
pnpm i postcss-px-to-viewport --save-dev

安装完成后，我们需要进行postcss插件相关的配置。在根目录新建一个名为 postcss.config.js 的文件（如果项目中已包含该文件则无需新建）。在文件中写入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false,
    }
  }
}

注意：postcss-px-to-viewport 同样存在第三方组件库兼容性的问题。比如在设计稿为750px时使用vant组件库会将vant组件的样式缩小。

vant组件库的设计稿是按照375px来开发的。因此在 viewportWidth 为750px时会出现转换问题。

下面是webpack的配置示例（解决vant兼容性问题）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: (file) => {
        // 读取的node_modules中的文件是vant，那么就将设计稿变为375px
        // 如果读取的文件不是vant的文件，那么就将设计稿变为750px
        // 这样就可以避免vant组件在750px下出现样式缩小的问题了
        return file.includes('vant') ? 375 : 750;
      },
      unitToConvert: 'px',
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
    }
  }
}