Self-adaptation of Desktop WEB Applications

  node.js, question

Pan You is developing a desktop GUI application using NW.js. Because the demand side requires more customization of the pages, a large number of pictures provided were used as dom element background, and the size and layout at that time were all from Hard coding. At present, it is necessary to adapt to the desktop (it is not required to adapt to Mobile client, just a few desktop resolutions). However, since various parts of many pages are displayed with backgrounds (just set the size of a div element and then set the background picture), it is difficult to quickly and conveniently change to adaptation. Do you want to ask what good methods you have?

The width can be used as a percentage, the height can be vw(Viewport Width), and the background picture can be usedBackground-size: 100% 100%.Full stop

For example, to realize a responsive square, you can probably do this:

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