You can use css animations, as long as the browser supports it
HTML
<div class="ProportionateFont">Text To Animate</div>
CSS
@media (max-width: 450px) {
.ProportionateFont {
animation: SmallerFont 0.3s;
animation-fill-mode: forwards;
-webkit-animation: SmallerFont 0.3s;
-webkit-animation-fill-mode: forwards;
}
}
@media (min-width: 450px) {
.ProportionateFont {
animation: LargerFont 0.3s;
animation-fill-mode: forwards;
-webkit-animation: LargerFont 0.3s;
-webkit-animation-fill-mode: forwards;
}
}
@keyframes SmallerFont {
0% { font-size:24px; }
100% { font-size:12px; }
}
@-webkit-keyframes SmallerFont {
0% { font-size:24px; }
100% { font-size:12px; }
}
@keyframes LargerFont {
0% { font-size:12px; }
100% { font-size:24px; }
}
@-webkit-keyframes LargerFont {
0% { font-size:12px; }
100% { font-size:24px; }
}
When screen is less than 450px (min-width:450px media query), the animation will be applied
When screen is more than 450px (max-width:450px media query), the animation will be applied