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 --save2、配置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,最终页面会换算成 20rempropList: ['*']}}
}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}}
},..
.
