Next.js H5 移动端适配

使用环境：

Next.js v14

css预处理方法

由于next.js内置了postcss，所以我们不需要再安装postcss/postcss-loader
我这里借助的转换依赖是 postcss-px-to-viewport-8-plugin

1.安装依赖

yarn add -D postcss-px-to-viewport-8-plugin

2.配置postcss.config.mjs文件（没有就自己创建这个文件，位于根目录）
配置参数，我这里由于需要做h5到pc自适应，所以我H5的css使用的是rpx单位，经过postcss-px-to-viewport-8-plugin插件的转化，会转换成vw单位；

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    "postcss-px-to-viewport-8-plugin": {
      unitToConvert: "px",
      viewportWidth: 390,
      unitPrecision: 10,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 0,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 568,
    },
  },
};

export default config;

  tailwindcss是我安装的依赖，没安装的可以删除这项

3.在scss/less/css文件里直接使用配置的unitToConvert单位即可自动将其转换成vw单位；

注意事项：
postcss-px-to-viewport-8-plugin是无法处理内联样式的，就是说你写在标签style里的属性是不会被转换的，要注意！如果非要用的话可以考虑使用vw方法转换。