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

Question

So I'm trying to have a sentence where certain words are animated (rotated through) - I thought it was working, but once I viewed the site on my mobile I found an issue. When viewed on a desktop (and even inside dev tools), the animated text is rendered in the correct size. However, once I view it on a mobile device (iPhone), the text becomes super small

I'm also using bootstrap on the page so I thought that maybe something was being overridden. But as you can see I've basically removed all the bootstrap classes and it still isn't working.

 .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> 

Demo on glitch: https://empty-cemetery.glitch.me/ When you view it on desktop, all the blue writing is the correct size. However, once you view it on mobile the animated text becomes tiny.

Any help is greatly appreciated! have been trying to fix this for hours now and just don't know what else I can try..

Answer 1

you can check how your page looks and performs on a mobile device:

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

you can also customize the contents using media queries.Media Queries for Standard Devices

If you want to know more info you can visit: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/