1. Using flexble.js
1. Height and width are both set to 100%
2. Vue imports the flexble.js file in the main method, and directly uses postcss to convert the rem value when writing the style
3. This will cause a problem. On a screen with a different ratio from the design draft, the large-screen project will not be displayed proportionally
4. The advantage of this is that no matter how the large screen ratio changes, the width and height always occupy the entire screen, and there are gains and losses.
2. Dynamic computing device width and height ratio + flexble.js
1. Dynamically calculate the width of the device, then calculate the ratio of the design draft, dynamically calculate the height of the device according to the ratio and width, and then specify the height as the height of the layout container
2. Dynamically calculate the height of the device, also ditto...
3. The height of the layout container comes out, and the elements inside are still responsive in the way of flexble.js
4. The advantage of this is that no matter how the ratio of your device changes, the project will always be scaled according to the ratio of the design draft
5. This will also cause a problem, that is, the width or height will be narrowed, and there will be blank areas
1. Solution: You can add a box outside the layout container, and then set the background image to cover the entire screen, which will improve the blank area
Summarize:
1. However, it is still recommended to understand what kind of equipment needs to be displayed on before development, and then carry out targeted development
2. If you are really not sure, I personally recommend using the first method above, directly setting the width and height to fill the entire screen. This method sometimes solves a lot of unnecessary troubles