Vue项目配置rem移动端适配


字数:672 阅读时长: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-px2rempostcss-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_modulesvant目录排除,此文件中的px不需要转rem。如果还有其他目录需要忽略的在此添加就可以。
  • remUnit的值是根据UI设计稿的页面宽度来定,现在通用的尺寸有750px375px两种。如下配置仅供参考:
设计稿宽度参数值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 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^