My friend is developing a desktop GUI application using NW.js. Since the page required by the demander required a lot of customization, a large number of provided pictures were used as the background of the DOM components. The size and layout at that time were all hard-coded. Now we need to adapt to the desktop (it does not require adapting to the mobile phone, just several desktop resolutions), but because many parts of the page are displayed with a background (just set the size of a p element and then set the background image) , it is difficult to change it to adaptive quickly and easily. I would like to ask if anyone has any good ideas?
为情所困2017-05-02 09:31:40
You can use percentage for width, vw (Viewport Width) for height, and background image background-size: 100% 100%;.
For example, if you want to implement a responsive square, it might look like this:
.square {
width: 30%;
height: 30vw;
background: url("bg.png") no-repeat scroll center 0 transparent;
background-size: 100% 100%;
}
大家讲道理2017-05-02 09:31:40
If this is the case, can it be implemented using transform:scale(multiple); on the entire page? (Of course, this requires you to have almost the entire page as background)
为情所困2017-05-02 09:31:40
How about the width percentage? Have you tried replacing the fixed width in batches? Just consider the ratio of container and element widths in fixed resolutions
ringa_lee2017-05-02 09:31:40
Like @eechen above, if you use the chrome core browser, you can use the background-size method of CSS3; all element sizes can be scalable and specified such as 50%;