ブラウザサイズに応じてフォントサイズを変更する方法【jQuery.fontFlex.js】｜DAD UNION

jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更する方法をご紹介します。
CSSのメディアクエリでフォントサイズを変更すれば良いのですが、これはタグを指定するだけで1行で記述できるので簡単です。

Contents

ブラウザサイズに応じてフォントサイズを変更するCSSの記述
jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するJavaScriptの記述
ブラウザサイズに応じてフォントサイズを変更するHTMLの記述
jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するデモページ
ソース元：jQuery.fontFlex

ブラウザサイズに応じてフォントサイズを変更するCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
    body {
        font-size: 15px;
        font-weight: normal;
        line-height: normal;
        margin: 5%;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }
    div {
        position: fixed;
        z-index: 2;
        top: calc(50% - 30px);
        left: calc(50% - 90px);
        width: 180px;
        height: 60px;
        line-height: 61px;
        text-align: center;
        border-radius: 60px;
        background: #000;
        color: #fff;
        font-weight: bold;
    }
    h1 {
        font-weight: 300;
        line-height: 150%;
        color: #777;
    }
-->
</style>

jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するJavaScriptの記述

※jquery.min.js、jQuery.fontFlex.jsファイルを読み込みます。$(指定タグ).fontFlex(可変フォントサイズ)で指定タグのフォントサイズをブラウザサイズ毎に変更します。今回はh1タグのフォントサイズをブラウザサイズに応じて変更します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.fontFlex.js"></script>
<script type="text/javascript">
    $(function() {
        $('div').delay(1000).fadeOut(800);
        $('h1').fontFlex(20,60,40);
    });
</script>

ブラウザサイズに応じてフォントサイズを変更するHTMLの記述

※h1タグのフォントサイズをブラウザサイズに応じて変更します。必要に応じて変更して下さい。

    <h1><b>jQuery.fontFlex</b>を使ってブラウザサイズに応じてフォントサイズを変更します。ブラウザをリサイズしてみてください。$(指定タグ).fontFlex(可変フォントサイズ)で指定したフォントサイズ毎に変更されます。jQuery.fontFlex.jsファイルサイズは1KB以下なので軽量です。正直jQuery.fontFlex.jsを使わなくてもメディアクエリでフォントサイズを変更すれば良いのですが、これはタグを指定するだけで1行で記述できるので簡単ですね。</h1>

    <div>ブラウザをリサイズ</div>