Description of "VH" & "VW" for mobile CSS Units

First, preface:

Responsive web design is inseparable from the percentage. However, CSS percentages are not the best solution for all problems. The width of the CSS is relative to the width of the nearest parent element that contains it. But what if you want to use the width or height of the viewport (viewpoint) instead of the parent element?

II, "VH" & "VW":

VH: Relative to the height of the window: The window height is 100VH.

VW: Relative to the width of the window: The window width is 100vw.

100% height of Windows
(Look at me!!! ）

Look at me!!! Look at me ...!!!! I am the width of the browser window (you can see my changes by changing the browser width): 0

Third, the source code:

Css:

  . demo-1,.demo-2,.demo-3{margin-bottom:10px; padding:10px 0; line-height:30px; color: #fff; text-indent:10px;}  . Demo-1 strong,.demo-2 strong,.demo-3 strong{color: #fff!important;}  . DEMO-1{WIDTH:10VW; background: #1ab5e3;}  . DEMO-2{WIDTH:25VW; background: #FF5F09;}  . DEMO-3{WIDTH:50VW; background: #28AF59;}  . demo-4{position:fixed; z-index:10; top:0; left:0; width:150px; height:100vh; color: #fff; Background:rgba (0,0,0,.5) ;}  . Demo-4 span{position:absolute; top:50%; display:block; padding:0 10px;-webkit-transform:translatey ( -50%); Transform: Translatey (-50%);}

Html:

  <p class= "demo-1" > Windows 10%: <strong class= "JS-GETVW1" >0</strong></p>  <p class= "demo-2 "> Windows 25%: <strong class=" js-getvw2 ">0</strong></p>  <p class=" demo-3 "> Windows 50%: < Strong class= "JS-GETVW3" >0</strong></p>  <p class= "demo-4" ><span> windows 100% height <br/ > (see me!!!) ) </span></p>  <p class= "Btn-normal" > Look at me!!! Look at me ...!!!! I am the width of the browser window (you can see my changes by changing the browser width): <span class= "Js-viewwidth" >0</span></p>

Js:

$ (function () {  ///Window width change function  Resizewindow () {    var viewwidth = window.innerwidth;    $ ('. Js-viewwidth '). HTML (viewwidth);    $ ('. JS-GETVW3 '). HTML (VIEWWIDTH/2);    $ ('. Js-getvw2 '). HTML (VIEWWIDTH/4);    $ ('. Js-getvw1 '). HTML (VIEWWIDTH/10);  }  Initialize  Resizewindow ();    The browser window changes to invoke the function defined above (  window). Resize (function (event) {    Resizewindow ();  });});