<div id="contents">
<h1>JavaScriptのmatchMedia分岐してみよう！</h1>
<h2>ブレイクポイント背景色が変わります。</h2>
<p id="result">現在はイベントが発生してません。</p>
<p>ブレイクポイントとするメディアクエリ：max-width: 896px でイベント発生</p>
</div>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contents {
padding: 20px;
}
h1{
margin-bottom:30px;
}
h2 {
margin-bottom: 20px;
}
p#result {
font-size: 18px;
font-weight: bold;
}
.bg_red {
background-color: #ff0000;
}
var mediaQuery = matchMedia("(max-width: 896px)");
console.log(mediaQuery);
// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);
function handle(mq) {
if (mq.matches) {
// ウィンドウサイズが896px以下の時
$("#result").text("matchMediaのイベントが発生しました");
$("#contents").addClass("bg_red");
} else {
// それ以外
$("#result").text("現在はイベントが発生してません。");
$("#contents").removeClass("bg_red");
}
}
// ページが読み込まれた時に実行
handle(mediaQuery);
External CSS
This Pen doesn't use any external CSS resources.