jQueryでレスポンシブのブレークポイントを設定する

jQueryでブレークポイントを自由に設定

$(function(){
	if (window.matchMedia('(max-width: 668px)').matches) {
		/* ウィンドウサイズ668以下の処理を記述 */
	} else if (window.matchMedia('(max-width:768px)').matches) {
		/* ウィンドウサイズ768以下の処理を記述 */
	} else if (window.matchMedia('(min-width:769px)').matches) {
		/* ウィンドウサイズ769以上の処理を記述 */
}})

ポイントは「window.matchMedia」

window.matchMediaを活用することで、レスポンシブで自由に動作させたい処理を記述していくことが可能です。また、下記のような応用も可能です。

$(function(){
	if (window.matchMedia('(max-width: 767px) and (min-width:669px)').matches) {
		/* ウィンドウサイズ669以上、767以下の処理を記述 */
}})

コラム カテゴリ

コラム一覧