vue项目中Toast字体过小，没有边距

最新推荐文章于 2022-09-06 09:37:18 发布
最新推荐文章于 2022-09-06 09:37:18 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： vue 组件库 vant 文章标签： vue vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45378485/article/details/99696712
版权
vue 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
组件库
1 篇文章 0 订阅
订阅专栏
vant
1 篇文章 0 订阅
订阅专栏

1、前段时间在写项目的时候使用 vant 组件库比较多，在使用vant中Toast时，在Chrome中手机模拟中测试正常，但是当网页放到手机中时字体显示特别小，但是你在vue文件中怎么添加样式都没有用；
2、问题的原因可能是我之前写的那种rem适配方案的问题；

解决办法

在项目 App.vue 文件中添加样式，在Elements中找到toast的类名。为其添加样式，把字体的大小扩大；并添加边距就可以了；
样式一定要写在App.vue里面才会生效；

小六：
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目引入字体.ttf的方法
12-09
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 ...以上这篇vue项目引入字
vant的Toast怎么在使用success的情况下对文字大小,行距以及宽度进行自定义设置
fury的博客
12-15 748
'>邮寄资料提交成功， 奖品将在活动结束后为您安排寄出</div>",现在这段代码使用了.success显示对号icon图标,但是现在是不显示的, 因为里面设置了type和message,默认情况下使用了.success就不能设置type和message了,通过引入vant库的icon: success就可以同时显示对号icon图标和设置样式了。
怎么改变自定义toast的width和height
kengxi2725的博客
12-31 1083
不知道为什么不能使width的值随意变大。可以改变width的值在400dp以下，如果超过400dp的话，toast的宽度就固定不变了，怎么才能使其变大呢？ toast的layout是这样的。     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     andro
自定义 Android toast 字体大小
weixin_37077736的博客
07-25 2403
让Android Toast 居中 可以设置 字体大小 Toast toast = Toast.makeText(this, "这是一个简单的自定义Toast", Toast.LENGTH_LONG); toast.setGravity(Gravity.CENTER, 0, 0); //居中显示 LinearLayout linearLayout = (LinearLayout) toast.getView();
vue+vant移动端遇到的那些问题
热门推荐
weixin_41700532的博客
03-21 2万+
1、项目引用了lib-flexible 跟px2rem-loader做适配，然后真机测试的时候发现字体在手机上显示的很小。【推荐去看下px2rem-loader的文档】 原因+解决：百度说应该在后面加上/*px*/（font-size:14px;/*px*/），这里这么设置时，字体的大小要为两倍，如你想让字体显示为14px,css代码则为【font-size:28px;/*px*/】，对于bor...
Vant2实现自适应字体大小
m0_67193261的博客
09-06 3694
Vue项目开发基于Vant2的移动端应用时实现自适应字体大小的方法
解决在vue项目中webpack打包后字体不生效的问题
10-18
总的来说，解决Vue项目中Webpack打包后字体不生效的问题主要涉及CSS编写习惯、Webpack配置以及浏览器兼容性。选择适合项目需求的方法，可以确保字体在生产环境中的正确显示。在开发过程中，及时检查控制台的元素样式...
vue-toast：适用于vue2的移动Toast插件
02-06
用于vue2的移动Toast插件。 用法 安装： npm install vue2-toast -S 进口： import 'vue2-toast/lib/toast.css' ; import Toast from 'vue2-toast' ; Vue . use ( Toast ) ; 要么 import 'vue2-toast/lib/toast....
Vant 使用之Toast Vant安装和使用
a_靖的博客
10-10 2万+
Vant 是一个VUE 的移动端组件库，里面有很多好用的组件。 第一步，安装和配置 Vant npm i vant -S npm i babel-plugin-import -D 安装完成之后，在项目.babelrc 文件修改配置plugins "plugins": [ ["import", { "libraryName": "vant", ...
小程序基本命令
aiven1637的博客
10-30 3267
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
Toast用法详解（各种自定义Toast）实例
11-16
android之Toast用法详解（各种自定义Toast）实例
vue使用vant框架的toast 轻提示框功能
asteriaV的博客
12-20 7184
脚手架 推荐使用 Vue 官方提供的脚手架Vue Cli 3创建项目 # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world 安装 # 通过 npm 安装 npm i vant -S 一. 自动按需引入组件 (推荐) babel-plugin-import是一款 babel 插件，它会在编译过程...
改变自定义Toast的width和height
cuckoochun的专栏
06-12 1330
Toast toast = Toast.makeText(getContext(),"tt",Toast.LENGTH_SHORT).show(); toast.setGravity(Gravity.FILL_HORIZONTAL,0,0);
vanpopup 高度_自定义Toast样式+改变Toast宽高
weixin_42613501的博客
01-15 4108
最近在一个项目的开发中有一个需要自定义Toast样式的需求，起初想想应该不复杂，不过在写代码的时候就发现不能改变Toast的宽高大小，没办法，只有一步一步的看源码解决。如果你查看源码会发现Toast的大小是由内容所占大小决定的，因此我们要解决的就是固定内容的大小。废话不多说，上代码。1.首先画一个自定义Toast样式的布局toast_clear_layout.xml,如下：android:id="...
vant样式突然缩小问题
qq_36869635的博客
03-21 803
今天做移动端项目的时候 运行的好好的 重启了一下项目 发现vant样式缩小了 o(╥﹏╥)o 找了好久才发现问题所在 简单点说就是vant用的是px作为基础单位 并且 不兼容px2rem(好狗啊) vant提供了两种解决办法 (我用的第二种 直接安装一个lib-fiexible)搞定 npm i -S amfe-flexible 特此记录一下 以后用别人的轮子 一定一定要看全文档 o(╥﹏╥)o ...
白店小二：Vant UI中Toast的特殊使用
liyangyang1998的博客
11-18 3700
问题： 在使用Vant时，接口调用之后要给出成功或失败提示，我想着就用Toast做嘛，很简单。 但Vant的Toast样式就让我很头疼，带有图标的Toast，图标是在上方，提示文字在下方的，而我想要的是二者在同一条直线上，我查了下文档发现，并没有能定义图标位置的属性，只有一个定义消息框方向的。 如果仅仅只是调整一下方向也不是特别困难的事情，但Vant的Toast是独立在应用外的，就是它不在项目定义的APP下，它是和APP同级的，如图。 这样就造成一个问题，没有办法修改Toast的样式了，因为要修改，就要去动
vant中的Toast的全局设置VUE2
qq_45031347的博客
04-07 2984
Toast轻提示
自定义Toast的背景颜色大小及字体大小
adan_xp的专栏
08-16 5752
参考文章原文链接：http://download.csdn.net/detail/u010566681/9612322 文章内容的核心思路是通过Toast类的getView方法获取到Toast的View，通过得到的view.findbyid查找安卓系统为Toast定义的TextView资源（android.R.id.message）。 而后针对TextView类进行操作即可。 更新代码也封...
Android - Toast字体修改
Mystra
02-14 8625
Toast字体修改本文地址：http://blog.csdn.net/caroline_wendyToast大小主要由系统负责，但可能有些厂商没有进行适配，需要调整Toast大小。调整Toast字体大小为25：LinearLayout linearLayout = (LinearLayout) toast.getView(); TextView messageTextView = (TextVie
vue3中codemirror字体大小设置
最新发布
04-25
在Vue 3中使用CodeMirror进行字体大小设置可以通过以下步骤实现： 1. 首先，确保已经安装了CodeMirror和Vue CodeMirror插件。可以通过npm或者yarn进行安装。 ``` npm install codemirror vue-codemirror 或者 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值