Vue3项目移动端适配方案

日日行不惧千万里

已于 2022-02-24 22:57:23 修改

阅读量2.8k

点赞数 2

分类专栏：经验记录经验分享 Vue 文章标签： postcss 前端 javascript

于 2022-02-24 22:53:12 首次发布

本文链接：https://blog.csdn.net/wykqh/article/details/123122938

版权

postcss-pxtorem amfe-flexible rem单位移动端适配 px转换

关键词由CSDN通过智能技术生成

经验记录同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

经验分享

24 篇文章 1 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

该方案会将项目中的 px 单位，自动转为rem 单位，行内样式中的px单位无法转换，index.html中<head>里的style中的px单位也无法转换，一定要注意！！！

该方案使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将 px单位转化为 rem
amfe-flexible 用于设置 rem 基准值

1.安装`amfe-flexible`依赖：

npm install amfe-flexible

然后在src 下的main.js 中引入该模块：

import 'amfe-flexible'

2.安装`postcss-pxtorem`依赖：

npm install postcss-pxtorem@5.1.1 --save-dev

--save-dev 参数会把依赖包的版本信息写进 package.json 文件里的devDependencies对象里，如下所示：

注意：默认不带参数npm install postcss-pxtorem会安装最新版本，启动项目时会报错！！！所以一定要用@5.1.1版本

 "devDependencies": {
  "postcss-pxtorem": "^5.1.1"
 },

然后在项目根目录中创建 postcss.config.js 文件，把下面内容复制到文件中并保存，启动项目时该文件会自动执行：

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        // 适用版本 5.1.1
        // npm install postcss-pxtorem@5.1.1 -D
        'postcss-pxtorem': {
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
        },
    },
};