CSS サイズで表示・非表示切り替え

いわゆるスマホサイズか否かで表示・非表示を切替えるってやつ

作成日:2024-11-12, 更新日:2024-11-12

サンプル

「max-width」を使ってるけど「mix-width」でもOK

スマホサイズでのみ表示したい

.sp_only {
	display: none;
}
@media (max-width: 767px) {
	.sp_only {
		display: inherit;
	}
}

PCサイズでのみ表示したい

.pc_only {
	display: inherit;
}
@media (max-width: 767px) {
	.pc_only {
		display: none;
	}
}