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

@keyframes myAnimation {
  0% {
    font-size: 1rem;
  }
  100% {
    font-size: 2rem;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  html {
    font-size: 20px;
  }
}

@keyframes myAnimation {
  0% {
    font-size: 16px;
  }
  100% {
    font-size: 32px;
  }
}

var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
var pixelFontSize = rootFontSize * 2; // 假设动画中字体大小是根元素字体大小的两倍

document.documentElement.style.setProperty('--animation-font-size', pixelFontSize + 'px');

.my-element {
  animation: myAnimation 1s infinite;
  font-size: var(--animation-font-size);
}