Reframe.jsはレスポンシブに対応していない特定の要素をレスポンシブ化してくれるスクリプトです。とても軽量＆使い方もカンタンなので、気軽に実装できるのが魅力です。とくにインラインフレームやビデオなど埋め込み型コンテンツには最適みたいですね。
インラインフレームや埋め込み動画などに最適
以下、Reframe.jsの実際のデモになります。
デモではとてもかわいいネコの動画が設置されています。実際にブラウザサイズを縮小して確認してみたところ、ちゃんとレスポンシブに対応していました。
使い方はとってもカンタンで、reframe.jsとcss/scssを読み込み、以下のようにセットするだけです。
reframe('selector');
また、オプションで自分の好きなクラス名を指定することも可能です。
reframe('selector', 'classname');
複雑な機能もなくシンプルでとても使いやすいと思います。インラインフレームや埋め込み動画などを手軽にレスポンシブ化させたいという人は、ぜひ活用されてみてはいかがでしょうか？
自分でイチからレスポンシブに対応させているヒマがない人には最適ですね。というわけで、レスポンシブでない要素をレスポンシブに対応させることができる「Reframe.js」のご紹介でした。
ダウンロードや詳しい使い方は以下のページからどうぞ。
