Vue3项目移动端适配方案
该方案会将项目中的 px 单位，自动转为rem 单位，行内样式中的px单位无法转换，index.html中<head>里的style中的px单位也无法转换，一定要注意！！！该方案使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 remamfe-flexible 用于设置 rem 基准值1.安装amfe-flexible依赖npm
·
该方案会将项目中的 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: ['*'],
},
},
};
3、重启项目，完成移动端适配。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)