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

Question

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

Answer 1

Vous pouvez utiliser le pourcentage pour la largeur, vw (Viewport width) pour la hauteur et background-size: 100% 100%;.

pour l'image d'arrière-plan.

Par exemple, si vous souhaitez mettre en place un carré responsive, vous pouvez probablement faire ceci :

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

Answer 2

Si tel est le cas, la page entière peut-elle être implémentée en utilisant transform:scale(multiple);? (Bien sûr, cela nécessite que vous ayez la quasi-totalité de la page en arrière-plan)

Answer 3

En ce qui concerne le pourcentage de largeur, avez-vous essayé de remplacer la largeur fixe par lots ? Considérez simplement le rapport entre les largeurs des conteneurs et des éléments sous des résolutions fixes

Answer 4

Comme @eechen ci-dessus, si vous utilisez le navigateur Chrome Core, vous pouvez utiliser la méthode background-size de CSS3 ; toutes les tailles d'éléments peuvent être évolutives et spécifiées, par exemple 50 %

 ;