import postcssPxToViewport8Plugin from ‘postcss-px-to-viewport-8-plugin‘；

npm 命令行：

npm i postcssPxToViewport8Plugin

package.json插件的版本：

重点：引入插件的两种方式

 postcss-px2rem-exclude配置 postcss.config.js无效

为什么引入插件不生效？

发现没有效果，然后然后百度网上资料发现发现。。。

需要注意的是：上述配置是脚手架自动生成的文件（并不是自己创建的），即在构建项目时，将babel的配置成单独的文件才可以，否则只能在配置文件来配置。

配置文件：

1.移动端在package.json配置

2.电脑端在vite.config.js或vue.config.js配置

对比：

1.引入位置的不同

备注：如果在构建项目的时候没有将babel单独配置，那么就是不能通过创建postcss.config.js 文件的形式配置

网上搜索的插件：px转rem 或 px转vw

1.postcss-px2rem-exclude

2.postcssPxToViewport8Plugin

备注：

uniapp、h5等移动端。可以采用flex弹性盒子布局+rem相对单位，进行布局，这样就可以不使用插件。

 相对单位，网页元素的尺寸(宽、高)适应屏幕。

下面是举例：

  1 rem = html文字大小

eg:

html {  font-size:20px}，所以： 1rem == 20px;

less/sass/scss，让css具有计算能力;

媒体查询：检测屏幕的视口宽度，flexiable.js根据屏幕宽度自动修改html文字大小。