开发者笔记

Vue项目配置rem移动端适配

字数：699 阅读时长：2分钟 阅读：85

现在市面上移动设备大小各异，为了统一的产品形态和良好的用户体验，所以在做移动H5项目时，需要考虑到移动端适配问题。本文就讲讲Vue+H5项目配置rem移动端适配。

Vue+H5适配

一、项目介绍

  • 脚手架CLI：@vue/cli
  • Vue版本：2.6.11
  • 移动UI组件库：Vant#2.10.14
  • CSS预处理器：sass

二、配置lib-flexible插件

  • 下载插件
1
npm i -D lib-flexible
  • 导入：在src/main.js中使用
1
import 'lib-flexible'

三、项目配置

  • 安装postcss-px2rem和postcss-loader插件依赖
1
npm i -D postcss-px2rem postcss-loader

提示： 如果项目使用了第三方的UI组件库（文本以VantUI为例），而又不想让组件库的px转为rem，则需要安装postcss-px2rem-exclude。

1
npm i -D postcss-px2rem-exclude
  • 在vue.config.js中配置，如果没有此文件，在根目录新建即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// vue.config.js
module.exports = {
  // ...
  css: {
    sourceMap: true,
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          /* rem适配忽略文件目录 */
          require('postcss-px2rem-exclude')({
            remUnit: 75,  // 参数 1
            exclude: /node_modules|vant/i,  // 参数 2
          }),
        ],
      },
    },
  },
  // ...
}
  • 使用Vite脚手架工具构建的Vue项目，可以进行如下操作：
    1. 在根目录下新建postcss.config.js文件
    2. 配置内容如下：
1
2
3
4
5
6
7
8
module.exports = {
    plugins: {
        'postcss-px2rem-exclude': {
            remUnit: 75,
            exclude: /node_modules|vant/i
        }
    }
};

参数解释

  • remUnit：这个值是一个计算单位，相当于 1rem = 75px
  • exclude：是一个正则表达式，忽略rem编译检查的目录，上边的配置是要把node_modules和vant目录排除，此文件中的px不需要转rem。如果还有其他目录需要忽略的在此添加就可以。
  • remUnit的值是根据UI设计稿的页面宽度来定，现在通用的尺寸有750px和375px两种。如下配置仅供参考：
设计稿宽度参数值UI尺寸CSS样式
375px37.520px20px
375px7512px24px
750px7532px32px

注意：

  1. 此方法对于内联样式和:style属性中的动态样式不生效。
  2. 对于px值比较小的转换不友好，因为px转成rem后，值是很小的小数。例如：1px的border转换后有些机型直接不展示，还有使用border-radius绘制的小圆圈或小圆点，转换后估计是个椭圆。例：
1
2
3
4
5
6
7
8
9
10
.border {
    border: 1px solid #ddd;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #00b1fb;
    border-radius: 4px;
}
  1. 解决方法比较简单，对于比较小尺寸的可以忽略转换（当然也可以使用transform+scale来实现）。
  2. 忽略转换可以加注释/* no */，或者使用大写的PX，具体如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 忽略写法 1 */
.border {
    border: 1PX solid #ddd;
}

/* 忽略写法 2 */
.border {
    border: 1px solid #ddd; /* no */
}

.dot {
    width: 8px; /* no */
    height: 8px; /* no */
    background-color: #00b1fb;
    border-radius: 4px; /* no */
}

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2021-11-04
最后更新： 2022-02-08
本文标题： Vue项目配置rem移动端适配
本文链接： https://www.tiven.cn/p/b1ab6b72/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
欢迎留言，提问 ^_^