問(wèn)題描述

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

問(wèn)題解答

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

比如要實(shí)現(xiàn)響應(yīng)式的正方形,大概可以這樣:

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

如果是這樣的話，能不能整頁(yè)用transform:scale(倍數(shù));來(lái)實(shí)現(xiàn)？（當(dāng)然，這要求你幾乎整頁(yè)都是背景）

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

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