サイト制作に関するメモ書き

HOME > JavaScript > matchMediaを使ってみる

matchMediaを使ってみる

以前Media QueriesのブレークポイントでJavaScriptを実行する方法という記事を書きましたが、matchMediaというメソッドを使用すると同じような事ができるようなので試してみました。

対応ブラウザ

matchMediaが対応しているブラウザはこちら。
IE10からの対応になります。

try-to-use-the-matchMedia01

 

サンプルコード

CSSで要素の出し分けを行ってみます。

HTML

<div class="pc">PCサイズ</div>
<div class="sp">SPサイズ</div>

CSS

@media (max-width: 640px) {
	.pc {
		display: none;
	}
}
@media (min-width: 641px) {
	.sp {
		display: none;
	}
}

JavaScript

上記で設定したCSSに合わせてconsoleを出すようにしてみます。

window.addEventListener('resize', function (event) {
	if(window.matchMedia('(max-width: 640px)').matches) {
		console.log('SPサイズ');
	}
	if(window.matchMedia('(min-width: 641px)').matches) {
		console.log('PCサイズ');
	}
});

リサイズする毎にウインドウサイズに応じたconsoleを表示するようになりました。
matchMediaを使ってみるのデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP