问

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

樊家醪糟律_905 发布于 2022-10-26 12:25

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

4 个回答

如楼上@eechen，如果使用chrome核浏览器，可以使用CSS3的background-size方法；元素大小全部使用50%之类的可缩放指定大小即可；

2022-10-27 01:05 回答

魍魉之波_414
宽度百分比呢，试过没有呢，批量替换掉固定宽度，只要考虑好固定几种分辨率下的容器与元素宽度比例

2022-10-27 01:05 回答

banli
如果是这样的话，能不能整页用transform:scale(倍数);来实现？（当然，这要求你几乎整页都是背景）

2022-10-27 01:06 回答

xhl583337984
宽度可以用百分比,高度可以用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%;
}
```
2022-10-27 01:06 回答

没了方向的路

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签