Using CSS new unit VW,VH method in responsive design

Considering the development of a future responsive design, if you want, the height of the browser can also be adjusted based on the percentage value. However, using a percentage-based value is not always the best way to define the size of the browser window, such as the font size does not change as you change the window, and now the new unit introduced by CSS3 explicitly solves the problem.

CSS3 introduced "VW" and "VH" based on width/height relative to window size, "VW" = "View width", "vh" = "View height"; The above what we call Windows units allows us to be closer to the browser window to define size. Refer to the demo case against the following four container CSS styles:

. demo {   width:100vw;   FONT-SIZE:10VW; /* Width is window 100%, font size is window 10% */}.demo2 {   width:80vw;   FONT-SIZE:8VW; /* Width is window 80%, font size is window 8% */}.demo3 {   width:50vw;   FONT-SIZE:5VW; /* Width is window 50%, font size is window 5% */}.demo4 {   width:10vw;   HEIGHT:50VH; /* Width is window 10%, container height is window 50% */}html code: 
 You can shrink the demo window to see changes in the different big kids. Currently this CSS3 app supports all major browsers, ie must be over 10.