Bootstrap4を使用しているサイトでメディアクエリを追加する場合の記述は以下のようになります。
Bootstrapではデフォルトで次のように画面サイズが決められています
| 識別子 | 画面サイズ | デバイス |
|---|---|---|
| xs | 575px以下 | モバイル（縦向き） |
| sm | 576px 〜 767px | モバイル（横向き） |
| md | 768px 〜 991px | タブレット |
| lg | 992px 〜 1199px | PC |
| xl | 1200px 以上 | PC（大画面) |
cssのメディアクエリは次のように記述します。
@media (max-width: 575.98px) {
.my-class {
// cssプロパティをここに記述
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.my-class {
// cssプロパティをここに記述
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.my-class {
// cssプロパティをここに記述
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.my-class {
// cssプロパティをここに記述
}
}
@media (min-width: 1200px) {
.my-class {
// cssプロパティをここに記述
}
}