vue-cli3移动端px转rem适配方案

最新推荐文章于 2024-07-31 14:57:04 发布

weixin_33932129

最新推荐文章于 2024-07-31 14:57:04 发布

阅读量2.2k

点赞数

文章标签： javascript json ui ViewUI

原文链接：https://juejin.im/post/5c80bebde51d45391712545c

版权

在vue3-CLI搭建环境中对于移动端适配中可以采用postcss-pxtorem和lib-flexible这两个插件配合使用

1.在node安装插件 cnpm install lib-flexible postcss-pxtorem --save
2.在main.js 文件中引入 import 'lib-flexible/flexible.js',在package.json文件中引入

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,// 设计稿宽度的1/10
        "propList": [
          "*"
        ]// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
      }
    }
},
复制代码

tips

json后缀结尾的文件不允许有注释，上面只是代码中的注释只是方便查看。

转载于:https://juejin.im/post/5c80bebde51d45391712545c