vue3+vant移动端适配 px转换rem

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 但是市场现在的主流设置尺寸是750return 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: ['*'],
},
},
};
这个文件会被自执行

vue3+vant移动端适配 px转换rem相关推荐

移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
WebStorm设置px转换rem，亲测有效！
为了保证网页的响应式设计,我们在H5开发中用的单位一般都是rem,怎么在WebStorm中设置自动将px转换rem呢?非常简单,只需要安装一个插件即可. 步骤: WebStorm --> Pre ...
WebStorm设置px转换rem插件
为了保证网页的响应式设计,我们在H5开发中用的单位一般都是rem,怎么在WebStorm中设置自动将px转换rem呢?非常简单,只需要安装一个插件即可. 步骤: WebStorm --> Pre ...
vscode px转换rem插件 px to rem rpx vw (cssrem)
vscode px转换rem插件px to rem & rpx & vw (cssrem) 这个插件非常好用,我给3星! 选中按Alt + Z可以px和rem转换
Vue3项目移动端适配方案
该方案会将项目中的 px 单位,自动转为rem 单位,行内样式中的px单位无法转换,index.html中<head>里的style中的px单位也无法转换,一定要注意!!! 该方案使用以下 ...
移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
vue-cli使用px2rem 或 postcss-plugin-px2rem px转换rem
1.安装插件 (1)安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev (2)移动端适配解决npm包 " ...
VUE中引入插件实现px转换rem
1.使用命令行安装lib-flexible: npm install lib-flexible --save 2.引入lib-flexible: 在项目入口文件 main.js 里引入 lib-fl ...
html px转换rem,在线px转rem工具代码
px转rem ,部署到本地服务器即可运行. px转rem body{font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica;} ul{ list- ...

vue3+vant移动端适配 px转换rem

vue3+vant移动端适配 px转换rem相关推荐

最新文章

热门文章