移动端点击字体放大出现抖动状况

news/2025/3/4 8:19:18/

项目场景:

在react项目中使用antd组件中的锚点组件,在点击进行跳转的时候锚点字体是需要变大。在控制台点击没有发现这种情况,在真机进行测试出现了字体抖动的情况。


// 锚点点击之前的样式
.ant-anchor-link-title {color: #866c49;font-family: 微软雅黑;font-size: 15px;
}
// 锚点点击之后添加上的样式
.ant-anchor-link-title-active {color: $color !important;font-weight: 700;font-size: 24px
}

我就是单纯的将点击之后字体变大,就出现了这种情况。我以为是外层的盒子的影响。我也将外层盒子的布局去掉也还是有这种情况出现。

解决方案:

我是另辟蹊径,用scale将元素放大就没有存在抖动的情况

// 锚点点击之前的样式
.ant-anchor-link-title {color: #866c49;font-family: 微软雅黑;font-size: 15px;
}
// 锚点点击之后添加上的样式
.ant-anchor-link-title-active {color: $color !important;font-weight: 700;scale: 1.4
}

http://www.ppmy.cn/news/732555.html

相关文章

Androidstudio 转换大小写快捷键

Action Mac OSX Win/Linux大小写转换 Cmd Shift U Ctrl Shift U注释代码(//) Cmd / Ctrl / 注释代码(/**/) Cmd Option / Ctrl Alt / 格式化代码 Cmd Option L Ctrl Alt L 清除无效包引用 Option Control O Alt Ctr…

keil3如何放大字体_keil3如何设置字体 keil字体放大快捷键

如何改变keiluvision3文件字体大小? 首先,文件大小是只读属性,不能直接更改。这取决于文档中的内容量。不像字体大小可以设置。 如果您想询问如何压缩文档大小,您应该减小文档大小并压缩图像。一般来说,如果一个文档太…

keil5怎么放大字体_keil4调节字体 keil字体放大快捷键

怎样设置keil4编程界面的字体大小? 1、在Keil uVision4中新建一个项目,创建一个文件。;2、选择编辑菜单,中的参数设置命令。;3、选择颜色和字符选项卡;4、选择编辑C文件。;5、选择改变字符。&am…

解决苹果手机点击输入框页面自动放大问题

一开始我的meta标签是这样的 <meta name"viewport" content"widthdevice-width, initial-scale1.0">解决方案 <meta content"yes" name"apple-mobile-web-app-capable"> <meta name"viewport" content&quo…

手机界面显示正常,点击输入框就放大,怎么破?看这里!

2019独角兽企业重金招聘Python工程师标准>>> 这是一个很神奇的现象&#xff0c;近期弄一个移动端活动页面&#xff0c;需要记录用户手机号获取验证码&#xff0c;一共就两个输入框&#xff0c;一个提交按钮&#xff0c;这个页面一开始为了适配不同的手机屏幕&#x…

Android Studio 单击按钮放大字体

借鉴于文章&#xff0c;稍加整理。单击按钮放大显示的文字&#xff08;Android studio&#xff09;_ const 的博客-CSDN博客_android studio点击按钮显示文本​​​​​​ 在仿真器上显示的字体虽清晰但小&#xff0c;对于视力正常的用户来说查看内容没有问题&#xff0c;但对于…

JS实现字体放大或缩小

现在需要将蓝色字体中的字体大小进行放大或缩小的功能&#xff0c;其实只需要将字体包裹在一个div中&#xff0c;并且设置id 和 默认样式style”font-size: 17px;”&#xff0c; <div id"the_content" class"article-content" style"font-size: 1…

H5页面iphone(苹果)手机点击输入框输入内容时页面自动放大

问题&#xff1a; H5页面,iPhone手机点击input搜索框,输入内容时,页面会自动放大。 解决&#xff1a; 方法一: html文件中 加上移动端元信息 <meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalableno"> 方法二: 浏…