初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】ブレイクポイントを設置しイベントをレスポンシブ対応させる方法【resize】

【JavaScript】ブレイクポイント スマホとPCで異なる処理を実行しよう!

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について分からない方はこちら