要使用 postcss-px-to-viewport 插件进行 CSS 自适应适配，可以按照以下步骤进行配置：

1. 安装必要的依赖

首先，安装 postcss、postcss-loader 和 postcss-px-to-viewport 插件：

npm install postcss postcss-loader postcss-px-to-viewport --save-dev

2. 创建或修改 postcss.config.js

在项目根目录下创建或修改 postcss.config.js 文件，添加 postcss-px-to-viewport 插件的配置：

module.exports = {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: 1920, // 设计稿的视口宽度
        viewportHeight: 1080, // 设计稿的视口高度，可以不配置
        unitPrecision: 3, // 转换后的精度，即小数点位数
        viewportUnit: 'rem', // 指定需要转换成的视口单位，建议使用vw
        selectorBlackList: ['.ignore', '.hairlines','html'], // 指定不转换为视口单位的类
        minPixelValue: 1, // 小于或等于1px不转换为视口单位
        mediaQuery: false, // 允许在媒体查询中转换px
        fontViewportUnit: 'rem' 
      }
    }
  };

为了防止font-size在不同的屏幕字体大小差异，将viewportUnit 跟fontViewportUnit都改成了rem

最后设置html的大小是19.2px，因为转换后正好是非常接近14px；body的大小是14px；

html {
  box-sizing: border-box;
  font-size:19.2px;
}

body {
  color: rgba(0, 20, 51, 0.85);
  font-family: 思源黑体;
  font-weight: 400;
  font-size:14px;
}

更改后基本符合小笔记本推荐尺寸缩放150%时跟默认的1920像素pc端都正常适配。