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

html-css020

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

首先，rem是根据根元素的字体大小来调整的。所以不管横屏还是竖屏，只要根元素的字体大小没有变，就不会变。

然后你说的，慢慢变大的问题，你看看是不是有哪里设置了transition。

<style type="text/css">

.font{font-size:12px}

.a{font-size:14px}

.b{font-size:16px}

.c{font-size:18px}

.d{font-size:20px}

//这里是最不好的表现形式，可以利用js里面的动画函数来执行并循环

}

</style>

<div class="font">我这是测试</div>

<div class="a">我这是测试</div>

<div class="b">我这是测试</div>

<div class="c">我这是测试</div>

<div class="d">我这是测试</div>

设置字体为em，不要设置PX。

详解：

em有如下特点：

1. em的值并不是固定的

2. em会继承父级元素的字体大小。

解决方法：

1、 将原来的px数值除以10，然后换上em作为单位

2、 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。