vue-cli3 如何实现pc端自适应
# 安装依赖
npm install lib-flexible --save-dev
npm install postcss-px2rem --save
1
2
2
# 引入lib-flexible
在项目入口文件 main.js
中引入 lib-flexible
import 'lib-flexible'
1
# 配置 postcss-px2rem
其中 px2rem
的配置放在 vue-cli3
项目中 vue.config.js
中
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 192 // 设计稿尺寸/10
})
]
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 修改 flexible.js 文件
因为 lib-flexible
和 postcss-px2rem
是针对移动端的源码中写死了设计方案,我们这里在安装好 lib-flexible
和 postcss-px2rem
后全局搜索 flexible.js
或者 refreshRem
,flexible.rem
总有一个能搜索到的。修改为下面的代码就实现了自适应。
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width = 540 * dpr;
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13