「画面2分割」&&「リサイズ可能」なウェブレイアウト

Question

下記を実装したい!!

このツイートで知りました。詳細はこちらに記載されています。
Bootstrap4で似たようなことはできないか調べているのですが、有力な情報が出て来ず、困っています。お詳しいかたいらっしゃったらご教授いただけると幸いです

Comments

[defghi1977]

内容読めば, ResizeObserverを使ってノードのリサイズ状態を観察しつつ, 適度なサイズになったらclassを付けてスタイルを変えてしまおうという, 素朴なものだよ.

[退会済みユーザー]

Railsサービスに利用したいのですが、npm(node.jsのパッケージ管理ツール？)から分かっていないので勉強しないといけませんね。。。

[defghi1977]

完全にクライアントサイドで完結する話だから, 後付けはさほど難しくないと思うよ.

[退会済みユーザー]

わかりました。ありがとうございます。

Answer 1

この手のレスポンシブなWEBページを作る場合は大抵メディアクエリを使いますが, この例ではページ内の領域毎にスタイルが変化しており, 一般のメディアクエリのテクニックを直接適用することが出来ません.

そのため, 次の何れかの方針で実装する必要があります.

• WEBページを複数のiframeに分解し, それぞれのフレーム毎にメディアクエリを意識したスタイルを指定しておく.
• ResizeObserverオブジェクトを用いて, 伸縮しているノードのリサイズ状況を観察し, その内容に応じて(大・中・小等の)クラスを設定する.

※なお現状このオブジェクトをサポートする環境はChrome64以降のみ.
参考)https://caniuse.com/#feat=resizeobserver

• requestAnimationFrameメソッドで定期的に伸縮しているノードのリサイズ状況を確認し, その内容に応じて(大・中・小等の)クラスを設定する.

要はResizeObserverの仕組みを自作する.

Answer 2

質問を小さく砕いてみました。
https://teratail.com/questions/119136

Comments

[defghi1977]

回答内容変更に伴い削除