postcss-pxtorem是一个PostCSS插件，用于将CSS中的像素值转换为rem单位，以实现响应式布局和适配不同屏幕尺寸的需求。

它的适配原理是将CSS中的像素值除以一个基准值，通常是设计稿的宽度，然后将结果转换为rem单位。这样，不同屏幕尺寸下，rem单位的大小是相同的，从而实现了响应式布局和适配的效果。

例如，如果设计稿的宽度为750px，那么在CSS中设置一个元素的宽度为150px，postcss-pxtorem会将其转换为2rem（150/750=.2，.2*10=2）。

通过使用postcss-pxtorem，我们可以方便地实现移动端适配，减少手动计算和调整像素值的工作量，提高开发效率。

vue中适配

1、下载postcss-pxtorem

npm install postcss-pxtorem --save

 2、配置postcss.config.js文件，如没有，新建

 

// postcss.config.js
module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 16, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}

nuxtjs中适配

这里主要是做一个官网的项目，所以要针对不通的PC端屏幕进行适配。
我采用的是flexable.js和postcss-pxtorem。我一开始用的是postcss-px2rem后来发现和nuxt引入公共css的时候发生了冲突所以改用了postcss-pxtorem。

先npm 安装包然后定义一个JS在plugins文件夹里面引入

1、flexable.js文件

2、再在nuxt.config.js里面配置plgins配置项

3、引入postcss-pxtorem

postcss: {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 192,
      propList: ["*"],
      minPixelValue: 2
    }
  }
},

..

.