【CSS】ブレイクポイントの指定方法

2023.07.20　Posted by Coding_team

Webプログラミング

こんにちは、今回はCSSのブレイクポイントの指定方法を見直したいと思います。

従来の書き方ではブレイクポイントを指定する際、min-width、max-widthを用いた少し分かりずらい記述になっていました。

ですがIEなどを考慮しなくて良くなった現状、使えるようになった新たな記法があります。

その記法では比較演算子を用いた直感的な書き方が出来るようになり、視覚的にもわかりやすくなります。

では従来の書き方と比較して、紹介していきたいと思います。

まず最初に、対応ブラウザは以下になるので一読しときましょう。

→Can I use…（Media Queries: Range Syntax）

3つのブレイクポイントのパターンを従来の方法、新しい方法の両方で記述してみました。

/* パターン1 */
@media (max-width: 768px) {/* 従来の方法 */
	#block01  {
		background: #dcdcdc;
	}
}
@media screen and (width <= 768px) {/* 新しい方法 */
	#block01  {
		background: #dcdcdc;
	}
}

/* パターン2 */
@media (min-width: 769px) {/* 従来の方法 */
	#block02  {
		background: #dcdcdc;
	}
}
@media screen and (768px < width) {/* 新しい方法 */
	#block02  {
		background: #dcdcdc;
	}
}

/* パターン3 */
@media (min-width: 769px) and (max-width: 1200px) {/* 従来の方法 */
	#block03  {
		background: #dcdcdc;
	}
}
@media screen and (768px < width <= 1200px) {/* 新しい方法 */
	#block03  {
		background: #dcdcdc;
	}
}