css字体设置为rem后，手机横竖屏切换的时候，字体变化会有个动画效果怎么办？

Posted 2023-03-26

手机站里面做了响应式控制后，字体用大小rem，实现不同尺寸的手机显示不一样大小的字体，但是有个问题就是，在手机从竖屏切换到横屏的时候，字体不是一次变大，而是动画效果一般慢慢变大，要怎么调整？
没有设置transition
代码是这样的
@media only screen and (min-width: 320px) and (max-width:374px)
html,bodyfont-size:87.5%;

@media only screen and (min-width: 375px) and (max-width:479px)
html,bodyfont-size:100%;

@media only screen and (min-width: 414px) and (max-width:479px)
html,bodyfont-size:100%;


@media only screen and (min-width: 480px)
html,bodyfont-size:150%;
.tool ul li afont-size:16px;

<style>.scalefont-size:1.2rem;</style>
<div class='scale'>这是放大的字体</div>

参考技术A 首先，rem是根据根元素的字体大小来调整的。所以不管横屏还是竖屏，只要根元素的字体大小没有变，就不会变。
然后你说的，慢慢变大的问题，你看看是不是有哪里设置了transition。追问

没有设置transition
就是全局做了一个@media 字体大小控制，然后调用的时候用的rem
这是放大的字体
然后第一次打开是没有问题的，只是当把手机屏幕翻转的时候，他会自动响应字体大小， 这时候，字体会有一个慢慢变化的过程，就像你说的transition效果，而不是一下就切换大小。但是我并没有用transition

追答

根元素html的字体大小不要变，调整不同media下的.scale的字体大小。
你现在是固定了.scale相对于根文档的大小，反过来了。
还有，你把每行的min-width去掉，多此一举了。only也可以去掉。

追问

哈，还是你前面说对了，确实是被transition影响了，因为网页里面我没做内容，偏偏引用了一个插件。谢了。

本回答被提问者采纳