vue3移动端自适应

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

我们在开发移动端的h5页面时，因为不同手机的屏幕宽度不一样，但最终页面在不同手机上的展示效果要一样的，所以在开发的时候需要对其进行样式的自适应。目前，移动端自适应的方法主要有基于rem的实现、和基于viewport的实现。本文我们在vue3框架中使用基于viewport的方案来实现移动端自适应。

viewport简介

viewport是指可视窗口，其对应的视口单位主要有vw、vh、vmin以及vmax。

• vw单位参照的是可视窗口的宽度，我们将视口宽度平分为100份，那么1vw=视口宽度/100，例如在iphone6中，1vw=3.75px；
• vh单位参照的是可视窗口的高度，我们将视口高度平分为100份，那么1vh=视口高度/100；
• vmin和vmax是指选取vw和vh这两者当中最小和最大的那个单位。

postcss-px-to-viewport

postcss-px-to-viewport是一款能够将px单位转化为可视窗口单位vw或vh的插件，这样我们在开发的过程中就可以直接以设计稿上的px单位为准，然后在应用此插件自动转化为vw单位，这样就可以自适应不同屏幕的手机了。

postcss-px-to-viewport插件在vue3项目中的配置如下所示:

// vue.config.js文件
const { defineConfig } = require('@vue/cli-service')
const pxtoviewport = require('postcss-px-to-viewport')

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            pxtoviewport({
              unitToConvert: 'px',
              viewportWidth: 750,
              unitPrecision: 3,
              propList: ['*'],
              viewportUnit: 'vw',
              fontViewportUnit: 'vw',
              minPixelValue: 2,
              mediaQuery: true,
              replace: true,
              exclude: [/node_modules/]
            }),
            require('autoprefixer')()
          ]
        }
      }
    }
  }
})    

在上述配置中可以看到：

• 我们配置unitToConvert（需要转化的单位）为px，这样就可以将代码中所有的px单位进行转化；
• 配置viewportWidth（设计稿的视口宽度）为750，也就是是我们UI设计稿是以750px来进行制作的；
• unitPrecision为转化vw之后保留的精度，也就是保留几位小数点；
• viewportUnit是要转化成的窗口单位，可以是vw或vh，fontViewportUnit是需要将字体转化为的单位，也可以是vw或vh；
• minPixelValue是最小的转换数值，如果设置为2，那么如果是1px将不会被转化，只有大于2px的单位才会被进行转化。
• exclude表示过滤掉一些不需要转化的文件，例如，如果我们项目中引入了一些移动端的组件库，那么这些组件库本身已经进行过移动端的适配，这种情况下我们就无需再对他们进行转化，否则再次转化可能会因为组件库开发时的设计稿基准和我们项目中的不一致而引起样式的错乱，这时候就需要去调整组件库的开发基准单位来解决。所以，最好的办法是直接过滤掉我们引用的UI组件库，这里建议将node_modules文件夹直接过滤掉，总之，建议不要直接对引入的npm包进行更改。

使用结果

我们在页面中开发时，对相应的class设置宽高如下，

.no-data-img {
  width: 281px;
  height: 140px;
}

当我们在浏览器中访问页面发现对应的class样式宽高单位已经是转化过的vw了，这样就实现了移动端的适配。