Vue项目初构之文字适配

我们先运行下项目，效果如下：

image.png

没什么问题，但是当我们双击页面的时候页面会放大缩小。我们该怎么处理呢。
很简单，我们在index.html页面处理一下。

在index.html中,viewprot那个标签内,我们把屏幕的最大和最小缩小范围都设置成1，并且禁止用户页面双击页面。
接下来我们处理文字适配问题，之前我们在开发移动项目中，字体的大小是写死的，不同机型，屏幕大小不同，页面字体的大小是一样，这就导致，手机上展示的h5页面，字体正常，然而到了pad上，字体就会变的很小，网上有许多方法，我们选择最简单的方法，用vm进行布局，我们打入一个组件。postcss-px-to-viewport，打开终端 运行 yarn add postcss-px-to-viewport。运行即可。
下面我们要对postcss-px-to-viewport进行配置:
1.新建 postcss.config.js 文件
2.配置适配项。

  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportUnit: 'vw', // 转换后的单位
      viewportWidth: 375 // 适口宽度
    }
  }
}

如果美工提供宽度为750的宽度的页面，需对应的把viewportWidth改变为750.这样我们改变页面的大小，字体也会适配了。