css - デスクトップ WEB アプリケーションの適応問題

Question

私の友人は、NW.js を使用してデスクトップ GUI アプリケーションを開発しています。需要者が要求したページはかなりのカスタマイズが必要だったので、提供された大量の画像を DOM コンポーネントの背景として使用しました。その際のサイズとレイアウトはすべてハードコーディングされました。次に、デスクトップに適応する必要があります (携帯電話に適応する必要はありません。いくつかのデスクトップ解像度に適応するだけです)。ただし、ページの多くの部分が背景付きで表示されるためです (p 要素のサイズを設定してから背景を設定するだけです)。画像）、すぐにアダプティブに変更するのは難しいのですが、何か良いアイデアがあれば教えてください。

Answer 1

幅にはパーセンテージ、高さには vw (ビューポート幅)、および背景画像を使用できますbackground-size: 100% 100%;.

たとえば、レスポンシブな正方形を実装したい場合は、次のようになります:

リーリー

Answer 2

この場合、ページ全体にtransform:scale(multiple);を使用して実装できますか? (もちろん、これにはページのほぼ全体を背景として使用する必要があります)

Answer 3

幅のパーセンテージについてはどうですか?固定解像度でのコンテナと要素の幅の比率を考慮して、固定幅をバッチで置き換えてみましたか?

Answer 4

上記の @eechen のように、Chrome コア ブラウザを使用する場合は、CSS3 の背景サイズ メソッドを使用でき、すべての要素のサイズを 50% などに指定できます。