レスポンシブルでない要素をレスポンシブルにする「Reframe.js」

レスポンシブルなテーマを適用したり、レスポンシブルなデザインを実装したものの、Youtubeなど外部サービスの動画を貼り付けると、レスポンシブルが適用されず、デザインからはみ出るという事象がよくありますが、それを改善してくれるライブラリ「reframe.js」があったので紹介。

https://dollarshaveclub.github.io/reframe.js/

インストール

インストールはnpmコマンドで簡単に導入できます。

インストール後はdist/reframe.jsとreframe.css（またはreframe.sass）を適当なディレクトリに配置してhtmlに読み込ませます。

使い方

reframeさせたい要素を指定すると、サイズを調整してくれます。

 

何をやっているのか

reframe.jsは対象の要素に記述されているheight, width 属性を削除して、記述されていたheightとwidthの比率を合わせたdivを要素にラップすることで比率はそのままでサイズを調整するようです。