css - Problème d'adaptation d'une application Web de bureau

Question

Mon ami développe une application GUI de bureau à l'aide de NW.js. Étant donné que la page requise par le demandeur nécessitait beaucoup de personnalisation, un grand nombre d'images fournies étaient utilisées comme arrière-plan des composants DOM. À cette époque, la taille et la mise en page étaient toutes codées en dur. Maintenant, nous devons nous adapter au bureau (cela ne nécessite pas d'adaptation au téléphone mobile, juste plusieurs résolutions de bureau), mais parce que de nombreuses parties de la page sont affichées avec un arrière-plan (il suffit de définir la taille d'un élément p puis de définir l'arrière-plan image), il est difficile de le changer en adaptatif rapidement et facilement. Je voudrais demander si quelqu'un a de bonnes idées ?

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 %

 ;