vant样式突然缩小问题

最新推荐文章于 2022-10-09 16:31:52 发布
最新推荐文章于 2022-10-09 16:31:52 发布
阅读量810 收藏 1
点赞数
文章标签： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36869635/article/details/123635536
版权

今天做移动端项目的时候 运行的好好的 重启了一下项目 发现vant样式缩小了 o(╥﹏╥)o 找了好久才发现问题所在
在这里插入图片描述
简单点说就是vant用的是px作为基础单位 并且 不兼容px2rem(好狗啊)
vant提供了两种解决办法 (我用的第二种 直接安装一个lib-fiexible)搞定

npm i -S amfe-flexible

特此记录一下 以后用别人的轮子 一定一定要看全文档 o(╥﹏╥)o

IT H_jie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
在Vue项目中，当我们使用`scoped`属性来限制样式只作用于当前组件时，可能会遇到一个问题，即无法修改引入的第三方UI库，如Vant的组件样式。这是因为`scoped`的作用范围仅限于当前组件，不会影响其子组件。Vant的...
vant+vue初始化移动端项目，border样式重置：border.css
05-05
vant+vue初始化移动端项目，border样式重置：border.css
vue2使用vant组件库；使用rem后vant组件样式变小了。
i_am_a_div的博客
10-09 2287
vue2使用vant组件库；vue2使用vant组件库;使用rem后vant组件样式变小了。
postcss-px2rem vantjs 样式大小显示问题
Young_Gao的博客
06-25 6642
当postcss-px2rem 的 rootValue 设置为 75 或者 37.5 的时候， 会发现整个都显得特别小 解决办法，postcss.config.js 中如下配置 const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-pxtorem"); module.exports =...
flexlib结合postcss-px2rem-exclude解决Vant组件样式变小问题
weixin_43776965的博客
04-10 1950
由于vue-cli4.0以后没有bulid文件，在package.json文件内新增下面代码后，引用Vant组件样式即可恢复正常 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude":{ "remUnit": 37.5, // "exclud...
解决vant-ui变小的问题
iphonepl的博客
06-18 2507
vue使用rem布局时 vant插件字体变小欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如
vue项目中Toast字体过小，没有边距
weixin_45378485的博客
08-17 2342
1、前段时间在写项目的时候使用 vant 组件库比较多，在使用vant中Toast时，在Chrome中手机模拟中测试正常，但是当网页放到手机中时字体显示特别小，但是你在vue文件中怎么添加样式都没有用； 2、问题的原因可能是我之前写的那种rem适配方案的问题； 解决办法 在项目 App.vue 文件中添加样式，在Elements中找到toast的类名。为其添加样式，把字体的大小扩大；并添加边距就可...
解决使用rem布局，vant组件样式变小的问题
tian6632的博客
06-28 2671
解决使用rem布局，vant等移动端组件会出现样式变小的问题，原因如下：（1）通常使用flexible.js（淘宝团队的移动端布局处理方式）就可以，当然使用其他的也是一样的。（1）因为两者使用的单位不一样，vant等使用的是 单位，我们项目中使用的是 解决使用rem布局，vant等移动端组件会出现样式变小的问题，解决方案如下： 添加以下代码即： 标签，是： 里面的内容结果如图：...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题（转）
weixin_43743956的博客
03-06 3310
转自：https://www.cnblogs.com/skylineStar/p/10036525.html 公司有一个项目是vue-cli3.0结合lib-flexible、px2rem并且用了vant的ui组件。 与链接中的情况一样，就是用了px2rem之后，vant的样式变小了。 第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible npm install l...
样式库vant-weapp-dev.zip
08-23
《 vant-weapp-dev：打造高效优雅的微信小程序样式库》 在移动互联网时代，微信小程序因其轻量级、快速加载的特性，深受开发者和用户的喜爱。为了提升小程序的用户体验和视觉效果，一套精心设计的样式库是必不可少...
Toast用法详解（各种自定义Toast）实例
11-16
android之Toast用法详解（各种自定义Toast）实例
微信小程序自定义toast代码
03-29
来自原文地址  小程序交互仅提供这些API  (此图片来源于网络，如有侵权，请联系删除! ) wx.showToast的效果是这样的，太难看了 (此图片来源于网络，如有侵权，请联系删除! ) 现在我们来自己写个toast 一、我们把样式写在app.wxss里，这样每个地方都可以调用到   /*toast start*/ .wxapp-toast-mask{ opacity: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 888; } .wxapp-toast-
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
vue-cli3.0用lib-flexible、postcss-px2rem-exclude实现移动端适配，解决第三方ui库样式变小问题,如：vant
一纸奇文的博客
11-21 2502
第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible npm install lib-flexible 二、在项目的入口main.js文件中引入lib-flexible import 'lib-flexible' 第二部分：使用postcss-px2rem-exclude自动将css中的px转换成rem 一、安装postcss-px2rem-exc...
vue 移动端自适应 px转rem 适配vant-ui
qq_33745371的博客
10-01 524
文章目录先看效果图1.安装lib-flexible2.main.js引入lib-flexible3.在index.html页面设置meta标签（设备宽度以及缩放比例）4.安装postcss-pxtorem5.在根目录下创建postcss.config.js配置文件6.测试 先看效果图 px已变成rem,且会根据宽度不同，自动调节大小 1.安装lib-flexible 解决移动端适配问题 npm i lib-flexible --save 2.main.js引入lib-flexible import
使用vant的移动端REM适配方法
Aaa_Liao的博客
06-21 2205
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.
Vue禁止页面缩放
JIZQAQ学习&踩坑笔记本
05-22 1656
做了个Vue+Vant的mobile端web项目，整个设计原本是小程序的，现在临时改成web，发现不需要缩放，于是把缩放给禁用掉。 找到这个项目的index.html文件 添加一行 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> content里面几个参数意思是宽度设置为设备宽度，initial-scale属性控制初始
vant 小程序踩坑之Toast
weixin_43831302的博客
07-29 1743
官方给的路径是这样 import Toast from ‘path/to/@vant/weapp/dist/toast/toast’; 报错 修改后 import Toast from ‘@vant/weapp/toast/toast’; 可以正常使用了 在页面引入按照官网方式就可以了
postcss-pxrem和vant - ui组件库冲突页面变小
YangWenYu_lala的博客
03-01 743
vue移动开发中，使用postcss-px2vw插件它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem 面向百度编程 果然没错 const pxtorem = require('postcss-pxtorem') const autoprefixer = require('autoprefixer') module.exports = ({ file }) => { let rootValue
强制修改vant样式
最新发布
10-11
强制修改Vant样式是指通过代码的方式来对Vant组件库的样式进行修改，而不是依赖于Vant提供的样式主题配置或者通过覆盖CSS样式文件的方式进行修改。 要强制修改Vant样式，可以按照以下步骤进行： 1. 导入Vant组件库，并在项目中正确引入Vant样式文件。 2. 在需要修改样式的组件中使用`<style>`标签来书写自定义样式。 3. 使用Vant提供的组件名称或者类名选择器来选择需要修改的组件或者元素。 4. 使用CSS属性来修改组件或者元素的样式，如：`color`来修改文字颜色、`background-color`来修改背景颜色等。 示例代码如下： ```html <template> <vant-button class="my-button">修改按钮样式</vant-button> </template> <style> .my-button { /* 强制修改按钮的背景颜色为红色 */ background-color: red; /* 强制修改按钮的文字颜色为白色 */ color: white; /* 强制修改按钮的边框颜色为黑色 */ border-color: black; } </style> ``` 这样就可以通过强制修改Vant样式来实现自定义的效果。需要注意的是，由于Vant组件库本身已经提供了一些样式配置选项，可能会覆盖掉部分自定义样式，此时可以尝试添加`!important`来强制生效。另外，当Vant组件库更新时，可能会导致样式覆盖问题，需要再次进行修复。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值