在CSS中使字体大小相对于屏幕宽度而不重复

Question

在我的网页中，我希望我的字体具有根据页面宽度的字体大小。目前我正在使用@media screen and (max-width: blah px)来调整屏幕大小，但是当我每100px使用它时它会变得非常长，而且似乎必须有更好的方法来实现这一点。

@media screen and (max-width: 1500px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 70px;
    }
}
@media screen and (max-width: 1400px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 65px;
    }
}
@media screen and (max-width: 1300px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 60px;
    }
}
@media screen and (max-width: 1200px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 55px;
    }
}
@media screen and (max-width: 1100px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 50px;
    }
}
@media screen and (max-width: 1000px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 45px;
    }
}
@media screen and (max-width: 900px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 40px;
    }
}
@media screen and (max-width: 800px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 35px;
    }
}
@media screen and (max-width: 700px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 30px;
    }
}
@media screen and (max-width: 600px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 35px;
    }
}
@media screen and (max-width: 500px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 20px;
    }
}
@media screen and (max-width: 400px) {
    #todayDate, #cosmicDate, #cosmicdatelabel{
        font-size: 15px;
    }
}

有更好的方法吗？或者我是否必须使用这么多次重复才能实现这个目标？