レスポンシブデザイン実装のブレークポイント

レスポンシブデザインのCSSmediaqueryの設定サンプルです。

See the Pen Responsive break point by webdev (@webdev-jp-net) on CodePen.0

サンプルを別窓表示するリンク

CSSサンプル

codepenへ掲載のものはSCSSなので、CSSのサンプルも。

基準にしているのは、この値です。

  • iPhone plus系の短い辺 … 414px
  • iPad Proの短い辺 … 1024px

max-aspect-ratio: 3/2でポートレイト(縦向き)を検知、
min-aspect-ratio: 3/2でランドスケープ(横向き)を検知して
辺の長さの上限下限と組み合わせ、設定しています。

スマートフォン

ポートレイト(縦向き)、ランドスケープ(横向き)それぞれのとき
短い辺が414px(iPhone plus系端末の短い辺)以下に収まる場合。

@media
only screen and (max-aspect-ratio: 3/2) and (max-width: 414px),
only screen and (min-aspect-ratio: 3/2) and (max-height: 414px) {
	.box::before {
		content: 'Smart Phone';
	}
}

タブレット

ポートレイト(縦向き)で短い辺が 414px(iPhone plus系端末の短い辺)よりも大きく1024px(iPad Proの短い辺)に収まる場合、
ランドスケープ(横向き)で短い辺が 414px(iPhone plus系端末の短い辺)よりも大きく768px(iPad系端末の短い辺)に収まる場合。

@media
only screen and (max-aspect-ratio: 3/2) and (max-width: 1024px) and (min-width: 415px),
only screen and (min-aspect-ratio: 3/2) and (max-height: 768px) and (min-height: 415px) {
	.box::before {
		content: 'Tablet';
	}
}

PC(タブレット以上)

ポートレイト(縦向き)で短い辺が 1024px(iPad Proの短い辺)よりも大きい場合か、
ランドスケープ(横向き)で短い辺が 768px(iPad系端末の短い辺)よりも大きい場合。

@media
only screen and (max-aspect-ratio: 3/2) and (min-width: 1025px),
only screen and (min-aspect-ratio: 3/2) and (min-height: 769) {
	.box::before {
		content: 'Large Display';
	}
}

関連記事

Pocket