css - 桌面WEB应用自适应问题

Question

盆友在开发一个桌面GUI应用，使用的是NW.js。由于需求方需哟的页面要求自定义比较多，大量使用提供的图片作为dom元件背景，当时的大小和布局都是写死的。现在需要做桌面上的自适应（不要求适应手机端，就几种桌面分辨率），但是由于很多页面的各个部分都是用背景来展示的（就一个p元素设置好大小然后设置背景图片），很难快速方便地改成自适应，想问一下大家有什么好的办法吗？

Answer 1

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

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

リーリー

Answer 2

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

Answer 3

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

Answer 4

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