现在市面上移动设备大小各异，为了统一的产品形态和良好的用户体验，所以在做移动H5项目时，需要考虑到移动端适配问题。本文就讲讲Vue+H5项目配置rem移动端适配。
Vue+H5适配
一、项目介绍
- 脚手架CLI：
@vue/cli - Vue版本：
2.6.11 - 移动UI组件库：
Vant#2.10.14 - CSS预处理器：
sass
二、配置lib-flexible插件
- 下载插件
npm i -D lib-flexible
- 导入：在
src/main.js中使用
import 'lib-flexible'
三、项目配置
- 安装
postcss-px2rem和postcss-loader插件依赖
npm i -D postcss-px2rem postcss-loader
提示： 如果项目使用了第三方的UI组件库（文本以VantUI为例），而又不想让组件库的px转为rem，则需要安装postcss-px2rem-exclude。
npm i -D postcss-px2rem-exclude
- 在
vue.config.js中配置，如果没有此文件，在根目录新建即可。
// 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项目，可以进行如下操作：- 在根目录下新建
postcss.config.js文件 - 配置内容如下：
- 在根目录下新建
// postcss.config.js
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样式 |
|---|---|---|---|
| 375px | 37.5 | 20px | 20px |
| 375px | 75 | 12px | 24px |
| 750px | 75 | 32px | 32px |
注意：
- 此方法对于
内联样式和:style属性中的动态样式不生效。 - 对于
px值比较小的转换不友好，因为px转成rem后，值是很小的小数。例如：1px的border转换后有些机型直接不展示，还有使用border-radius绘制的小圆圈或小圆点，转换后估计是个椭圆。例：
.border {
border: 1px solid #ddd;
}
.dot {
width: 8px;
height: 8px;
background-color: #00b1fb;
border-radius: 4px;
}
- 解决方法比较简单，对于比较
小尺寸的可以忽略转换（当然也可以使用transform+scale来实现）。 - 忽略转换可以加注释
/* no */，或者使用大写的PX，具体如下：
/* 忽略写法 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 */
}
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信
- Vue3学习与实战 · 全局挂载使用Axios
- Vue3学习与实战 · 配置使用vue-router路由
- Vue3学习与实战 · Vuex状态管理
- vue3 + vite实现异步组件和路由懒加载
- Vite+Vue3+Vant快速构建项目
欢迎访问：天问博客
