css - 桌上型WEB應用自適應問題
PHP中文网
PHP中文网 2017-05-02 09:29:40
0
4
708

盆友在開發一個桌面GUI應用,使用的是NW.js。由於需求方需喲的頁面要求自訂比較多,大量使用提供的圖片作為dom元件背景,當時的大小和佈局都是寫死的。現在需要做桌面上的自適應(不要求適應手機端,就幾種桌面解析度),但是由於很多頁面的各個部分都是用背景來展示的(就一個p元素設置好大小然後設置背景圖片) ,很難快速方便改成自適應,想問大家有什麼好的方法嗎?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆(4)
为情所困

寬度可以用百分比,高度可以用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%;
}
大家讲道理

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

为情所困

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

左手右手慢动作

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板