Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

Answer 1

The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

For my personal project I used vw and @meida. It works perfectly.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}