REM, percent, VH, VW what kind of unit layout should be used?

rem, percentage, VH, VW various layout methods, when compatible with different resolution, what kind of method is better. Noun Introduction:

percent: is the percentage of the element's width or height relative to the parent, and is more commonly used, width and height can be

REM: A variant of the percent itself, but this unit is based only on the percentage of the width, not the percentage based on the height

VH, VW: based on the size of the viewport, 1VH = 1% viewportheight, 1wh = 1% viewportwidth calculation formula:

Let's say we have 4:3 screens (1920*1440) and 16:9 screens (3840*2160).

Set: w = 0.3rem,h = 0.3rem;

docEl.style.fontSize = * (clientwidth/1920) + ' px ';

On the 1920*1440 screen:
w = 300px, h = 300px;

W/width = 300/1920 = 15.625%
h/height = 300/1440 = 20.8% on the

3840*2160 screen:
w = 600px, h = 600px;

W/width = (2*300)/(1920*2) 
h/height = 600/2160 = 27%

Obviously, if you use REM to do altitude, the percentage of screen height on different screens is not the same, but it is proportional to the change in width. Conclusion:

In terms of width, REM and percent are OK,
In terms of height, because the height of the page has two kinds of conditions

1, unlimited growth: traditional HTML page (similar to Taobao page)
Solution: 100% combined with REM.
Page overall layout, the height of the page container is recommended to set to 100%, specific to the height of an element, his height can be set through REM.

2, Single-screen page: page height and screen content display area of the same height (single page display page)
Consider using a percentage to do wide, high, if the height of the trouble, you can use VW, VH to do the layout.