[JavaScript]ウィンドウサイズ変更を検知して文字サイズを更新

0

ウィンドウサイズの変更を検知して文字サイズや画像サイズの割合を変更する実装です。
なんとなく気分でjQuery使って説明しています。Vue.jsなどほかフレームワークでも応用が利くと思います。

var w = window.innerWidth;

// window幅変更を検知する
jQuery(window).resize(function() {
    baseFontDeside();
});

// window幅からbaseFontSizeを決める
function baseFontDeside () {
    if (w >= 768) {
        var baseFontSize = w/73;
        jQuery('html').css('font-size',baseFontSize + 'px');
    } else if (w >= 576) {
        var baseFontSize = w/46;
        jQuery('html').css('font-size',baseFontSize + 'px');
    } else {
        jQuery('html').css('font-size','medium');
    }
}

window幅の取得、変更の検知をVue.jsでやる場合の参考記事。
下記リンクの補足部分参照
→補足：画面サイズ変更を検知して変更する

baseFontDeside()でフォントサイズを画面幅に応じて割合で設定しています。

JavaScriptおすすめの書籍

JavaScriptはonlineの情報も多く、Google検索が便利なので書籍を読む必要はないかもしれません。
ただ、これから学ぶ方は一冊簡単な本を読んだ方が理解が深まると思います。逆引き本とかも良書はあるのですが、Google検索した方がコピー＆ペーストできるので便利なのでいらないかな。

確かな力が身につくJavaScript「超」入門 第2版
これからはじめる方向け

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。