ITエンジニア/デザイナ向けにオープンソースを毎日紹介

レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。

そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。

RTSの使い方

Bootstrapのサイトに組み込んだ例です。

ウィンドウ幅を変更するとテキストサイズも変わります。大きすぎず、ウィンドウに合わせた最適な大きさになります。

別なデモです。こちらはSCSSのMix-inを使っているようです。

幅を変更した時の表示です。

RTSはウィンドウ幅のイベントをJavaScriptで拾って処理を行っています。CSSだけですべてが解決できる訳ではないですが、ユーザの可読性のために導入検討する価値はありそうです。

RTSはCSS製のオープンソース・ソフトウェア(MIT License)です。

twbs/rfs: Automated responsive font sizes

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2