Nuxt3.js移动端Pc端自适应解决方案：使用flexible.js和postcss-pxtorem实现傻瓜式Px转Rem

本文适用于Nuxt3.js

移动端自适应解决：

主要使用了flexible.js+postcss-pxtorem自动转换px为rem，flexible.js解决移动端适配的问题，

项目依赖如下

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.5.0",
    "postcss": "^8.4.23",
    "postcss-pxtorem": "^6.0.0"
  },
  "dependencies": {
    "less": "^4.1.3"
  }
}

使用：

只需要根据你的设计稿填写rootValue,只需要写Px插件会自动转换Rem傻瓜无脑简单

Pc+移动端适配

这里排除了不需要转换的页面，从而你的Pc页面不会执行Rem转换没有废话直接下载看项目代码