plugins: { "postcss-pxtorem": { // 把px单位换算成rem单位 rootValue: 16, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。 propList: ['*'], // exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值 selectorBlackList: ['.radius'], //要忽略并保留为px的选择器 // mediaQuery: false, //（布尔值）允许在媒体查询中转换px。 minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0 'autoprefixer': { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" //'last 2 versions', // 所有主流浏览器最近2个版本 grid: true

在src/utils下新建rem.ts文件

function setRem() {
  // 基准大小
  const baseSize = 16 //浏览器默认字体大小16px
  const baseScale = baseSize / 1920 // 针对PC端，1920的设计图。 移动端的对应调整为750或者375
  const widthScale = window.innerWidth // 当前窗口的宽度
  // const heightScale = window.innerHeight // 当前窗口的高度
  // 尺寸换算-根据宽高比率取最小缩放比-目前不考虑高度
  // const comparedHeight = (widthScale * 1080) / 1920
  // if (heightScale < comparedHeight) {
  //   widthScale = (heightScale * 1920) / 1080
  // 计算实际的rem值,得到该宽度下的相应font-size值,并赋予给html的font-size,
  const rem = widthScale * baseScale
  document.documentElement.style.fontSize = rem + 'px'
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = () => {
  setRem()
实现原理：项目开发样式尺寸根据1920固定填写，项目构建的时候，将px样式根据16px=1rem比例转换为rem样式，当浏览器窗口尺寸改变，动态调整根元素font-size尺寸，根据rem*fontSize动态生成px尺寸。
 
启动项目，可以在控制台看到样式都自动补充了前缀，尺寸都是rem的。
 
注意事项：
 
网上很多autoprefixer和postcss-pxtorem配置，单独配置呢分别生效，要是两者组合一起放到vue.config.js内用，发现不生效，经过测试，放到postcss.config.js文件可以。
rem布局不多赘述，有很多详细说明rem布局原理的资料。
简单的说，通过JS获取设备宽度动态设定rem值，以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。
新建rem.js文件，于main.js中引用
// 设计稿以1920px为宽度，而我把页面宽度设计为10rem的情况下
const baseSize = 192; // 这个是设计稿中1rem的大小。
function setRem() {
  // 实际设备页面宽度和设计稿的比值
  const scale = document.documentE
                                    刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结：
1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。
2.cnpm install postcss-pxtorem -D安装postcss-pxtorem，此插件如果你用的是webpack的话只要进行安装即可，不需要另外进行配置，此插件是对px进行转换。
3.新建一个rem.js的
                                    postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。
前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。
1.安装依赖
                                    Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀  。它是  Google 推荐的，并在Twitter和阿里巴巴中使用。
可以实现css3代码自动补全，也可以运用到sass、less中
前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。
当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。
//使用Vue3，需要升级vue-cli，全局安装最先版本@vue/cli；
npm install -g @vue/cli@next
// 安装成功后输入,显示，安装成功
 vue -V    //@vue/cli 4.5.12
1.2、安装成功后搭建Vue3项目
vue create myproject
1.3、 启动服务
cd myproject  //进入文件
npm run serv
                                    在配置autoprefixer时，按照之前的配置可以成功补全css浏览器前缀，但是结合postcss-pxtorem插件，px可以成功转换为rem，但css前缀无效。
经过几个小时的鼓捣，终于让我发现了蛛丝马迹。哈哈哈，很开心，好激动！！
一起来看一看博主陷入的困境吧。
1. autoprefixer的配置
根目录postcss.config.js文件中，配置代码如下：
module.exports = {
  plugins: {
    'autoprefixer': {
      overrid.
                                    1.使用插件
当前插件版本：postcss^8.3.6 postcss-pxtorem^5.1.1
 npm i postcss postcss-pxtorem -D
2. 在vue.config.js中配置
 css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            // 换算基数，
            rootValue: 16
                                    自动清理构建目录
npm install clean-webpack-plugin -D  避免在每次构建的时候，都需要手动清理dist文件。
在webpack.dev.js中配置如下：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 这个地方注意，可能会报错必须用解构的方式
plugins下添加如下...