画面サイズに合わせてフォントサイズが変わるようにする

画面サイズに合わせてフォントサイズが変わるようにする設定のメモ。


Bootstrapの切り替えポイントに合わせて、
viewport:576pxでFont-size:14pxに、
viewport:992pxでFont-size:16pxに。
を基準にしてフォントサイズを可変に。



    html    {
        font-size: calc(87.5% + 2 * (100vw - 576px) / 416);@important!
    }

この設定だと、
viewport: 360pxだとフォントサイズはおよそ13pxで、
viewport:1366pxだとフォントサイズはおよそ18pxくらいに。

coliss.com[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニックを参考にしました。

コメントを残す