定番
履歴

jQuery メディアクエリと同様の出し分け

jQuery メディアクエリと同様の出し分け

CSSのメディアクエリによって、ウィンドウの幅に応じたスタイルの出し分けは、よく見かけるようになってきました。

そこで、そのウィンドウサイズに応じてJSを発動させたい、という要望もあるかと思います。

メディアクエリによるstyleの値の数値をJSで取得して発動させる手もありますが、単純にメディアクエリ同様のウィンドウサイズを取得して発動させる例を紹介します。

CSSのメディアクエリの例

.pc-mode {
	/* PCのCSS */
}

@media only screen and (max-width: 800px) {
	.sp-mode {
		/* SPのCSS */
	}
}

上記とほぼ同じ出し分けをJSで書くと

$(window).on('load resize', function() {
  var ww = window.innerWidth;

  if (ww > 800) {
    // PCのとき実行
  } else {
    // SPのとき実行
  }
});
2017-12-11 23:09:05
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top