VUE实现移动端适配方案（amfe-flexible + postcss-pxtorem）

最新推荐文章于 2024-10-14 14:08:08 发布

菜鸟老刘

最新推荐文章于 2024-10-14 14:08:08 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_36835683/article/details/121634455

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何通过安装和配置amfe-flexible及postcss-pxtorem，实现移动端项目的px转rem适配。首先，需要通过npm安装这两个依赖，然后在main.js中引入amfe-flexible。接着，在vue.config.js或.postcssrc.js中配置postcss-pxtorem，设置rootValue和propList。最后，测试结果显示CSS中的px单位会被正确转换为rem，确保了在不同设备上的适配效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤如下

1、先安装 amfe-flexible 和 postcss-pxtorem

postcss-pxtorem官方文档https://www.npmjs.com/package/postcss-pxtorem amfe-flexible官方文档https://www.npmjs.com/package/amfe-flexible

npm install amfe-flexible --save
npm install postcss-pxtorem --save

2、在入口文件main.js中导入amfe-flexible

import 'amfe-flexible';

3、配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可

在vue.config.js配置如下：

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}
在.postcssrc.js或postcss.config.js中配置如下：

module.exports = {
    "plugins": {
      "autoprefixer": {},
      'postcss-pxtorem': {
        rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
        propList: ['*'],
        selectorBlackList: ['van'],
        exclude: /web/i
      }
    }
  }

rootValue 根据设计稿宽度除以 10 进行设置，这边假设设计稿为 375，即 rootValue 设为 37.5；
propList 是设置需要转换的属性，这边 * 所有都进行转换。

4、测试结果

css中设置某类宽度为375px：

.box {
  width:375px;
}

运行后在浏览器可以发现已经转化为10rem,即375/设置的rootValue：