CSS / Bootstrap - 无论如何都要避免这种冗余吗？

Question

我需要根据视口改变字体大小，因为我使用下面的代码;但是，我觉得它有点多余和不专业。我相信这应该是获得相同结果的更好方法。

  

P.S。我正在使用Bootstrap 4

@media (min-width: 0px) and (max-width: 500px) {
.block {
 font-size: 5.1em !important;
 }
 } 

@media (min-width: 501px) and (max-width: 800px) {
.block {
 font-size: 6.1em !important;
 }
}

 @media (min-width: 801px) and (max-width: 1100px) {
.block {
  font-size: 4.8em !important;
}
}

 @media (min-width: 1101px) and (max-width: 1300px) {
 .block {
   font-size: 5.5em !important;
  }
 }

 @media (min-width: 1301px) {
  .block {
  font-size: 6em !important;
  }
 }