размер шрифта rem не отображается должным образом в анимации CSS - PullRequest
Новая
       34

размер шрифта rem не отображается должным образом в анимации CSS

0 голосов
/ 16 июня 2019

Итак, я пытаюсь найти предложение, в котором определенные слова анимированы (повернуты) - я подумал, что это работает, но как только я просмотрел сайт на своем мобильном телефоне, я обнаружил проблему.При просмотре на рабочем столе (и даже внутри инструментов разработчика) анимированный текст отображается в правильном размере.Однако, как только я смотрю его на мобильном устройстве (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 / Когда вы просматриваете его на рабочем столе, все синее написаноправильный размер.Однако, как только вы просматриваете его на мобильном устройстве, анимированный текст становится крошечным.

Любая помощь будет принята с благодарностью!пытаюсь это исправить часами и просто не знаю, что еще я могу попробовать ..

1 Ответ

1 голос
/ 16 июня 2019

вы можете проверить, как ваша страница выглядит и работает на мобильном устройстве:

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

вы также можете настроить содержимое с помощью медиа-запросов. Медиа-запросы для стандартных устройств

Если вы хотите узнать больше информации, вы можете посетить: https://css -tricks.com / snippets / css / media-query-for-standard-devices /

...