用rem做适配之后配置vant的样式适配

最新推荐文章于 2025-05-15 18:48:11 发布
原创 最新推荐文章于 2025-05-15 18:48:11 发布 · 793 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文解决了一个特定问题：使用REM单位进行页面适配时，如何正确配置Vant UI框架以避免样式错乱。关键在于调整.postcssrc.js文件中rootValue的设置，确保其与REM适配规则一致。

用rem做适配之后配置vant的样式适配

这几天遇到这样一个问题，就是用rem适配之后vant的样式就会发生改变，然后怎么都改变不了样式，试过各种网上的办法，最后发现是我的配置有问题，hhhh。
在这里插入图片描述
就是这个.postcssrc.js文件的配置问题。配置rootValue的字体大小没有根据我的rem适配规则来。比如我的1rem=10px，那么rootValue就配置成10，因为它的换算规则是a/10(px)=b/1(rem)。

vue2使用vant组件库；使用rem后vant组件样式变小了。
i_am_a_div的博客
10-09 3359
vue2使用vant组件库；vue2使用vant组件库;使用rem后vant组件样式变小了。
手写rem 与 移动端vant配置rem
2401_83915900的博客
03-30 862
图例:是一款postcss插件，用于将单位转化为rem用于设置rem基准值,将px转为rem,安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是3.x 所以要安装vant的针对vue3的版本 vant@next)第二步vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)
Vant-Rem 布局适配
最新发布
求职大学生
05-15 440
本文介绍了如何使用 Vant-Rem 进行布局适配，主要推荐使用 postcss-pxtorem 和 lib-flexible 两个工具。postcss-pxtorem 用于将 px 单位转换为 rem 单位，而 lib-flexible 用于设置 rem 基准值。文章详细说明了如何安装和配置这些工具，并提供了针对不同设计稿（如375px和750px）的适配方案。通过调整 .postcssrc.js 文件中的 rootValue，可以实现对不同设计稿的适配。此外，文章还提到了一些常见问题和解决方案，如配置文
解决使用rem布局，vant组件样式变小的问题
tian6632的博客
06-28 3358
解决使用rem布局，vant等移动端组件会出现样式变小的问题，原因如下：（1）通常使用flexible.js（淘宝团队的移动端布局处理方式）就可以，当然使用其他的也是一样的。（1）因为两者使用的单位不一样，vant等使用的是 单位，我们项目中使用的是 解决使用rem布局，vant等移动端组件会出现样式变小的问题，解决方案如下： 添加以下代码即： 标签，是： 里面的内容结果如图：...
vant UI与rem适配问题
weixin_45564474的博客
05-21 1006
vue-cli4.x项目引入vant-ui,要求在项目中使用rem单位,但vant是px的.故,需要添加一个自动转换插件和一段修改html根元素的font-size值的脚本 一.添加插件: npm i postcss-plugin-px2rem --save 添加之后需要在vue.config.js文件中加一段该插件的配置.参考博客链接：https://www.cnblogs.com/taohuaya/p/10274993.htm 使用默认配置即可,minPixelValuen设置为3.表示3px以上才转换
移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题
mm
02-04 800
rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小 问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。 至于为什么设置为50px；首先，设计稿是基于750px.
vue3 + vant开发 rem布局适配
weixin_55782474的博客
03-08 1346
1、在E盘创建一个文件夹exercise-two 2、点开exercise-two文件夹 3、执行图片中的命令 4、在webstorm中打开vant-app，全局引入vant 5、检测vant有没有引入成功 6、成功 ...
vant组件如何进行 REM 适配
weixin_55793273的博客
10-21 630
**目的：Vant UI 和设计稿一起使用如何进行适配移动端** ❓ 如何进行 REM 适配 ``` npm i amfe-flexible # 就是之前学过的 flexible.js ``` `main.js` ``` import 'amfe-flexible' ``` ==**REM 适配原理**==：利用媒体查询或 JS 动态检测设配的宽度，不同宽度下设置对应的根元素字体大小，这样所有使用 REM 作单位的元素自然就跟着变化啦！ ❓ 如何把写的 px 转换成 rem ``` npm .
在移动端 h5传统项目中使用vantui 并rem兼容适配
qq_21437991的博客
03-01 1574
自己尝试了把源码css拉下来改源码，把px改为rem，结果发现没卵用，可能因为px涉及的地方太多了改的不全导致效果不好吧。（这中间走了很多弯路，网上有说使用mini-css-extract-plugin的，然后各种复杂的配置，一顿折腾也是不行。发现浏览器页面style标签里面的css样式超长被截断了，复制出来也不全，根本没法用。至此，如果我的朋友是要用工程构建项目，那现在就可以快乐的使用vantui 的rem方式进行响应式开发了。所以想到工程类的项目可以利用webpack将css抽取出来作为单独的文件。
Vue2.0引入Vant有赞组件 解决部分样式失效问题 2022年3月21日
weixin_43643765的博客
03-21 1956
根据官方文档引入vant组件后部分样式失效 根据vant官方文档引入vant的popup组件 弹出后没有遮罩层 卡了两天，一开始以为是属性设置的问题，反复设置遮罩层就是没有。然后在看popup的源码也是正常的，决定区再引入dialog（同样具有遮罩层效果）进行实验，发现dialog的遮罩层也不显示。 其实是没有在bable.config.js中引入样式 如果你没有这个文件 可以在.babelrc中引入 "plugins": [ "transform-vue-jsx", "transform-runtime"
如何在h5的vant中 让其不自动转换px为rem
weixin_45121510的博客
04-09 1224
找到postcss.config文件 设置一个文件夹，专门放这部分不让其转换的页面 只return 这个plugins 其次：在文件夹的vue文件中， 需要设置媒体查询，因为一般移动端都设置了最大宽度。所以我们需要让他在大于760px（根据实际）时，干掉这个属性。 而且还得给页面设置最小宽度。 ...
postcss-pxtorem中的rootValue返回值没有生效问题
lotpyve的博客
12-26 1914
然后在重新启动，这样的话他是生效的啊，那么只有一种结果，就是 file.indexOf('vant')!== -1 一直都是为 true。按理说，.box 的 div 标签不是 vant 组件，所以他的 1rem 等于 75px，这里给他 width 定义的是 750px，应该恰好等于 10rem，恰好是整个屏幕的宽度才对。也就是说，1rem 等于十分之一的屏幕宽度，如果使用的是 vant 组件，则 1rem = 37.5px，如果使用的不是 vant 组件的样式，那么 1rem = 75px。
vue使用vant移动端rem的适配时报错误问题
mentalitys的博客
07-13 692
使用vant实现开发环境rem适配任意门vant 如果需要使用rem单位进行适配，推荐使用以下两个工具： postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 npm install postcss-pxtorem --save-dev npm i -S amfe-flexible 在根目录下新建一个postcss.config.js module.exports = { pl...
页面设置rem但是值不是正确的px
cyssxt的博客
08-01 1143
在谷歌浏览器中，我设置了html字体大小为8，某个div的宽度为37.2但是调试的时候浏览器中div实际的宽度仍未372px，这是因为在谷歌浏览器中字体的大小为10px，虽然你设置成了8px其实还是10px
vant ui与rem适配问题
dd602350527的博客
06-16 1803
1、安装插件 指令：npm i postcss-plugin-px2rem --save 添加之后需要在vue.config.js文件中加一段该插件的配置。 参考博客链接：https://www.cnblogs.com/taohuaya/p/10274993.htm 使用默认配置即可，minPixelValuen设置为3。表示3px以上才转换，有些像素值太小时没必要转换。 css: { loaderOptions: { postcss: {
nuxt + vant 适配 rem
樊小书生
03-07 1913
创建项目 npx create-nuxt-app <项目名> 详情查看 安装-NuxtJS 安装vant npm i vant -S 引入vant 这里采用的是： 导入所有组件 在根目录的 plugins 目录下创建 vant.js ，内容如下： import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index...
Vant组件库移动端Rem适配
weixin_47958188的博客
07-08 2101
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配置到项目中完成 REM 适配。 一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小） 1、安装 # yarn add amfe-flexible npm i amfe-flexible 2、然后在 main.
vant ui 适配移动端rem自动换算
逍遥的码农的博客
12-29 722
Vant UI 组件库的样式默认使用的单位是 px，若需要使用 rem，则需要使用插件进行进一步的处理 插件安装 使用 npm 或者 yarn 进行安装 yarn add postcss-pxtorem --save-dev // or npm install postcss-pxtorem --save-dev yarn add lib-flexible --save // or npm install lib-flexible --save PostCSS配置 const autoprefixer
vue3 vite vant 配置rem适配
04-01
6. 在 vant 官网中找到需要使用的组件，并按照官方文档中的使用方法修改样式，例如： ```css /* 修改按钮样式 */ .van-button { font-size: 14px; height: 40px; line-height: 40px; padding: 0 20px; border-...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值