rem 字体大小在 CSS 动画中无法正确呈现

Question

所以我试图有一个句子，其中某些单词被动画化(旋转( - 我认为它正在工作，但是一旦我在手机上查看该网站，我就发现了一个问题。在桌面上(甚至在开发工具中(查看时，动画文本将以正确的大小呈现。但是，一旦我在移动设备(iPhone(上查看它，文本就会变得非常小

我也在页面上使用引导程序，所以我认为可能有些东西被覆盖了。但正如你所看到的，我基本上已经删除了所有的引导类，但它仍然不起作用。

.animated span {
  color: #007bff;
  font-size: 0;
  opacity: 0;
  -ms-animation: topToBottom 10s infinite;
  -webkit-animation: topToBottom 10s infinite;
  animation: topToBottom 10s infinite;
}
.animated span:nth-child(2) {
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.animated span:nth-child(3) {
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.animated span:nth-child(4) {
  -ms-animation-delay: 6s;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
.animated span:nth-child(5) {
  -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
}

@-webkit-keyframes topToBottom {
  0%,
  20% {
    font-size: 2.5rem;
    opacity: 1;
  }
  /* visible for 1s */
  20.01%,
  100% {
    opacity: 0;
    font-size: 0rem;
  }

<h1 class=" cover-heading animated">TribePulse replaces <br />
 <span>status updates</span>
 <span>engagement surveys</span>
 <span>progress reports</span>
 <span>status meetings</span>
 <span>EoD emails</span>
</h1>

故障演示：https://empty-cemetery.glitch.me/当您在桌面上查看它时，所有蓝色文字都是正确的大小。但是，一旦您在移动设备上查看它，动画文本就会变小。

Answer 1

您可以检查页面在移动设备上的外观和效果：

https://developers.google.com/web/tools/chrome-devtools/device-mode/

您还可以使用媒体查询自定义内容。标准设备的媒体查询

如果您想了解更多信息，可以访问：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/