JavaScriptを制御する際、スマホサイズとPCサイズで異なった制御を行いたい場合があります。
そんな時に、どのようにブレイクポイントを設置し、制御していくかを紹介します。
紹介しているサンプルコードは使いまわすことがでるので、ぜひご利用ください。
なおこの記事は自分のメモのためにとりあえず投稿したもので、コードの記述はありますが説明は不十分です。今後誰が読んでもわかる文章に加筆していく予定です。ご了承ください。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
サンプルコード
変数breakpointの値を変更することで、ブレイクポイントを変更することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブレイクポイント</title>
</head>
<body>
<p></p>
<script>
const p = document.querySelector('p');
const brekPoint = 500; // 単位px
const responsive = ()=>{
const sp = matchMedia(`(max-width: ${brekPoint}px)`).matches;
if( sp ){
// ここにスマホサイズでの処理が入ります
p.innerHTML = `ブレイクポイントは${brekPoint}pxです。<br>現在は <span style="color:blue;">スマホ</span> サイズです。`;
}else{
// ここにパソコンサイズでの処理が入ります
p.innerHTML = `ブレイクポイントは${brekPoint}pxです。<br>現在は <span style="color:red;">パソコン</span> サイズです。`;
}
}
responsive();
window.addEventListener('resize', responsive);
</script>
</body>
</html>constについて分からない方はこちら
querySelectorについて分からない方はこちら
()=>（アロー関数）について分からない方はこちら
ifについて分からない方はこちら
innerHTMLについて分からない方はこちら
addEventListenerについて分からない方はこちら
