[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート
Post on:2019年2月18日
sponsors
フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。
Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。
RFS(Responsive Font Size) -GitHub
RFS(Responsive Font Size)の特徴
RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。
- フォントのサイズは、スクリーンやデバイスごとに最適化されます。
- フォントのサイズには下限と上限があり、小さく・大きくなりすぎるのを防ぎ、リーダビリティを確保します。
- 使い方は簡単、font-size mixinを使用するだけ。
- ベースのサイズや単位、ブレークポイントの定義など、カスタマイズも簡単。
- MITライセンスで、個人でも商用でも無料で利用できます。
フォントのサイズがどのように変化するかは、下記のグラフをご覧ください。
※サイズの単位はpx, remが選択でき、デフォルトはremです。
RFSで、フォントのサイズがどのように変化するか
RFS(Responsive Font Size)のデモ
シンプルなデモと実際のレイアウトを想定したデモの2種類が用意されています。
RFS(Responsive Font Size)の使い方
Step 1: インストール
RFSはパッケージマネージャを使ってインストールすることができます。
-
- npm
- npm install rfs
-
- yarn
- yarn add rfs
-
- bower
- bower install rfs --save
ソースファイルは手動でダウンロードして使用することもできます。しかし、RFSを簡単に管理および更新する機能を失うため、お勧めできません。
Step 2: 使い方
.scssの構文
|
1 2 3 4 5 6 7 |
// scss/main.scss @import "../node_modules/rfs/scss"; .title { @include font-size(4rem); // OR @include responsive-font-size(64px); OR @include rfs(64); } |
.sassの構文
|
1 2 3 4 5 6 |
// scss/main.scss @import "../node_modules/rfs/sass" .title +font-size(4rem) // OR +responsive-font-size(64px) OR +rfs(64) |
PostCSS
|
1 2 3 4 5 6 7 |
// postcss/main.css .title { responsive-font-size: 4rem; // OR rfs: 64; } // Handle postcss afterwards (see examples folder for PostCSS example) |
Less
|
1 2 3 4 5 6 7 |
// less/main.less @import "../node_modules/rfs/less"; .title { .font-size(4rem); // OR .responsive-font-size(64px); OR .rfs(64); } |
Stylus
|
1 2 3 4 5 6 |
// stylus/main.styl @import "../node_modules/rfs/stylus"; .title font-size(4rem) // OR responsive-font-size(64px) OR rfs(64) |
生成されるCSS
|
1 2 3 4 5 6 7 8 9 |
.title { font-size: 4rem; } @media (max-width: 1200px) { .title { font-size: calc(1.525rem + 3.3vw); } } |
Webpackを使用している場合は、接頭辞~を使用して@importを単純化できます。
|
1 2 3 4 |
@import "~rfs/less"; @import "~rfs/sass"; @import "~rfs/scss"; @import "~rfs/stylus"; |
Step 3: 設定
設定を変更することなくそのまま使用できますが、微調整する必要がある場合は、下記のようにします。
ベースのフォントサイズ(px or rem)
- SCSS, Sass & Stylus: $rfs-base-font-size
- Less: @rfs-base-font-size
- PostCSS: baseFontSize
- デフォルトの値: 1.25rem
フォントサイズの単位(px or rem)
- SCSS, Sass & Stylus: $rfs-font-size-unit
- Less: @rfs-font-size-unit
- PostCSS: fontSizeUnit
- デフォルトの値: rem
ブレークポイント(px, em or rem)
- SCSS, Sass & Stylus: $rfs-breakpoint
- Less: @rfs-breakpoint
- PostCSS: breakpoint
- デフォルトの値: 1200px
ブレークポイントの単位(px, em or rem)
- SCSS, Sass & Stylus: $rfs-breakpoint-unit
- Less: @rfs-breakpoint-unit
- PostCSS: breakpointUnit
- デフォルトの値: px
サイズ変更の係数(number)
- SCSS, Sass & Stylus: $rfs-factor
- Less: @rfs-factor
- PostCSS: factor
- デフォルトの値: 10
2次元メディアクエリ(boolean)
- SCSS, Sass & Stylus: $rfs-two-dimensional
- Less: @rfs-two-dimensional
- PostCSS: twoDimensional
- デフォルトの値: false
class生成(boolean)
- SCSS, Sass & Stylus: $rfs-class
- Less: @rfs-class
- PostCSS: class
- デフォルトの値: false
Safariのiframeサイズ変更のバグ修正(boolean)
- SCSS, Sass & Stylus: $rfs-safari-iframe-resize-bug-fix
- Less: @rfs-safari-iframe-resize-bug-fix
- PostCSS: safariIframeResizeBugFix
- デフォルトの値: false
使用にあたっての注意点
- html要素には定義しないでください。
remの値に影響を及ぼし、予期しない結果につながる可能性があります。 - 行間の問題を防ぐために、常にline-heightを（emまたは単位無しで）相対値で定義してください。
sponsors
