vue3 使用 postcss-pxtorem 实现自适应_vue3使用postcsspxtorem

一、PostCSS

PostCSS 是一款 CSS 编译器；

PostCSS 是一个使用 JavaScript 工具和插件转换 CSS 代码的工具，它的主要功能其实是可以利用 JavaScript 去处理一些原生的 CSS 或者预处理器（Less、Sass）处理不了的工作。这种特性本质上，是基于 PostCSS 自身的编译能力和强大的插件系统支持的基础之上的。

注意：

对于没有内置 postcss 的脚手架，在配置浏览器版本时，可以直接在脚手架的配置文件里面配置（例如 vue.config.js）。

而有内置 postcss 的脚手架，在配置浏览器版本时，则需要另外在 postcss.config.js 里面配置。

1、配置插件

1、由 Vue-cli 创建的项目，于 vue.config.js 里面配置

// vue.config.js
module.exports = {
  css: {
	loaderOptions: {
	  postcss: {
		plugins: [
		  // ...其他插件
		  "autoprefixer": {
            // 配置使用 autoprefixer
            overrideBrowserslist: [
			  "Android 4.1",
         	  "iOS 7.1",
          	  "Chrome > 31",
          	  "ff > 31",
          	  "ie >= 8"
          	  "last 2 versions", // 所有主流浏览器最近2个版本
          	] 
          }
		]
	  }
	}
  }
}

2、由 Vite 创建的项目，是天然支持 postcss 的，使用之前只需要安装即可。因此需要在 postcss.config.js 里面配置插件，没有该文件的在项目根目录下自行创建

// postcss.config.js
module.exports = {
  plugins: {
	// ...其他插件
    autoprefixer: {
      overrideBrowse