![見出し画像](https://assets.st-note.com/production/uploads/images/7597196/rectangle_large_type_2_2069a41cec1ac4fe704fa2c8e78877b3.jpg?width=1200)
【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;
}
}
この記事が気に入ったらサポートをしてみませんか?