WEB制作(html・css(スタイルシート))に関する各種メモ書き

Bootstrap4のメディアクエリ

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プロパティをここに記述
	}	
}

関連エントリー

No.990
09/09 15:27

edit

Bootstrap