vue3+vant移动端适配 px转换rem
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 remlib-flexible 用于设置 rem 基准值1.安装依赖yarn add amfe-flexible或者使用npm i amfe-flexible复制区:yarn add amfe-flexiblenpm
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem
lib-flexible 用于设置 rem 基准值
1.安装依赖
yarn add amfe-flexible
或者使用
npm i amfe-flexible
复制区: yarn add amfe-flexible npm i amfe-flexible
然后在 main.js 中加载执行该模块:
import 'amfe-flexible'
复制区: import 'amfe-flexible'
2.安装postcss-pxtorem依赖:
yarn add -D postcss-pxtorem
或者是
npm install postcss-pxtorem -D
这里解释一下:# -D 是 --save-dev 的简写 把依赖包的版本信息写进 package.json 文件里面
复制区: yarn add -D postcss-pxtorem npm install postcss-pxtorem -D
然后在项目根目录中创建 postcss.config.js 文件:
/* 这个postcss.config.js 是与public文件夹同级的! */
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
propList: ['*'],
},
},
};
这个文件会被自执行
复制区:
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
// 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
propList: ['*'],
},
},
};
这个文件会被自执行
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)