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

本文适用于Nuxt3.js

图片[1]-Nuxt3.js移动端Pc端自适应解决方案:使用flexible.js和postcss-pxtorem实现傻瓜式Px转Rem-小栋博客

移动端自适应解决:

图片[2]-Nuxt3.js移动端Pc端自适应解决方案:使用flexible.js和postcss-pxtorem实现傻瓜式Px转Rem-小栋博客

主要使用了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转换没有废话直接下载看项目代码

 

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容