FORSMILE
EN
JavaScript2020/07/24

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

ウィンドウサイズの変更を検知して文字サイズや画像サイズの割合を変更する実装です。

ブログ一覧へ / Back to Blog

ウィンドウサイズの変更を検知して文字サイズや画像サイズの割合を変更する実装です。

なんとなく気分でjQuery使って説明しています。Vue.jsなどほかフレームワークでも応用が利くと思います。

javascript
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 ―言語仕様から学ぶJavaScriptの本質

超おすすめ!Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。

📦
Amazon で関連書籍・ツールを検索
JavaScript 入門 プログラミング
Amazonで探す →(アソシエイトリンク)