【Bootstrap4】フォントサイズをレスポンシブに対応する

参考リンク：https://cccabinet.jpn.org/bootstrap4/layout/overview#responsive-breakpoints

// 大デバイス（デスクトップ, 1200px 未満）
@media (min-width: 992px) {
 .title {
   font-size: 7.0rem;
 }
}
// 中デバイス（タブレット, 992px 未満）
@media (max-width: 991.98px) {
 .title {
   font-size: 4.0rem;
 }
}
// 小デバイス（横向きモバイル, 768px 未満）
@media (max-width: 767.98px) {
 .title {
   font-size: 2.0rem;
 }
}
// @include media-breakpoint-up(sm) {
// 極小デバイス（縦向きモバイル, 576px 未満）
@media (max-width: 575.98px) {
 .title {
   font-size: 1.0rem;
 }
}

[CodePen]