この手のレスポンシブなWEBページを作る場合は大抵メディアクエリを使いますが, この例ではページ内の領域毎にスタイルが変化しており, 一般のメディアクエリのテクニックを直接適用することが出来ません.
そのため, 次の何れかの方針で実装する必要があります.
- WEBページを複数の
iframe
に分解し, それぞれのフレーム毎にメディアクエリを意識したスタイルを指定しておく.
ResizeObserver
オブジェクトを用いて, 伸縮しているノードのリサイズ状況を観察し, その内容に応じて(大・中・小等の)クラスを設定する.
※なお現状このオブジェクトをサポートする環境はChrome64以降のみ.
参考)https://caniuse.com/#feat=resizeobserver
requestAnimationFrame
メソッドで定期的に伸縮しているノードのリサイズ状況を確認し, その内容に応じて(大・中・小等の)クラスを設定する.
要はResizeObserver
の仕組みを自作する.