問題描述

盆友在開發一個桌面GUI應用，使用的是NW.js。由于需求方需喲的頁面要求自定義比較多，大量使用提供的圖片作為dom元件背景，當時的大小和布局都是寫死的。現在需要做桌面上的自適應（不要求適應手機端，就幾種桌面分辨率），但是由于很多頁面的各個部分都是用背景來展示的（就一個p元素設置好大小然后設置背景圖片），很難快速方便地改成自適應，想問一下大家有什么好的辦法嗎？

問題解答

寬度可以用百分比,高度可以用vw(Viewport Width),背景圖片可以用background-size: 100% 100%;.

比如要實現響應式的正方形,大概可以這樣:

.square { width: 30%; height: 30vw; background: url('bg.png') no-repeat scroll center 0 transparent; background-size: 100% 100%;}回答2：

如果是這樣的話，能不能整頁用transform:scale(倍數);來實現？（當然，這要求你幾乎整頁都是背景）

寬度百分比呢，試過沒有呢，批量替換掉固定寬度，只要考慮好固定幾種分辨率下的容器與元素寬度比例

如樓上@eechen，如果使用chrome核瀏覽器，可以使用CSS3的background-size方法；元素大小全部使用50%之類的可縮放指定大小即可；