<h1 class="text">font-size 3.5vw<br>- scaling fine</h1>
<h2 class="text">font-size calc(3.5vw)<br>- scaling on page load, but not on resize</h2>
<h3 class="text">font-size calc(3.5vw) & calc(6vw) >= 650px viewport width<br>- scaling on page load and recalculation on breakpoint, but not on resize</h3>
.text {
/* Fix Safari bug with viewport units in calc() */
min-height: 0vw;
}
h1 {
font-size: 3.5vw;
// font-size: calc(22px + 8 * (100vw - 750px)/ 450);
}
h2 {
font-size: calc(3.5vw);
}
h3 {
font-size: calc(3.5vw + 10px);
@media (min-width: 650px) {
font-size: calc(10vw);
}
}
View Compiled
This Pen doesn't use any external CSS resources.