It works well with CSS.
I went through the same issues and fixed it as follow.
Use a fixed "px" size for maximum size at a specific width and above. Then for different smaller widths, use a relative "vw" as a percentage of the screen.
The result below is that it adjusts itself at screens below 960px but keep a fixed size above. Just a reminder, not to forget to add in the html doc in header:
<meta name="viewport" content="width=device-width">
Example in CSS:
@media all and (min-width: 960px) {
h1{
font-size: 50px;
}
}
@media all and (max-width: 959px) and (min-width: 600px) {
h1{
font-size: 5vw;
}
}
@media all and (max-width: 599px) and (min-width: 50px) {
h1{
font-size: 6vw;
}
}
I hope it'll help!