The unit of css on the Mobile End: "Vl" & amp; "vw", cssvl

The unit of css on the Mobile End: "Vl" & "vw", cssvl
I. Preface:

The percentage of responsive web design is indispensable. However, CSS percentage is not the best solution to all problems. The CSS width is relative to the width of the nearest parent element containing it. But what if you want to use the width or height of the viewpoint instead of the parent element?

 

Ii. "Vl" & "vw ":

Vl:Relative to the window height: The window height is Gbit/s.

Vw:The window width is VW.

Windows 10%: 0Windows 25%: 0Windows 50%: 0100% height of Windows
(Look at me !!!)

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

 

Iii. 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:

<Div class = "demo-1"> 10% of Windows: <strong class = "js-getVW1"> 0 </strong> </div> <div class = "demo-2"> Windows 25%: <strong class = "js-getVW2"> 0 </strong> </div> <div class = "demo-3"> Windows 50%: <strong class = "js-getVW3"> 0 </strong> </div> <div class = "demo-4"> <span> 100% windows height <br/> me !!!) </Span> </div> <p class = "btn-normal"> check me out !!! Look at me ...!!! I am the width of the browser window (you can view my changes by changing the browser width): <span class = "js-viewWidth"> 0 </span> </p>

JS:

$ (Function () {// function for changing the window width: function resizeWindow () {var viewWidth = window. innerWidth; ('.js-viewwidth'{.html (viewWidth); then (viewWidth/2); then (viewWidth/4); then (viewWidth/10);} // initialize resizeWindow (); // when the browser window changes, call the previously defined function $ (window ). resize (function (event) {resizeWindow ();});});

Note: Because the blog Park limits the writing Effect of js in the article (hahaha, it is estimated that it involves security issues), interested students can visit my personal blog related articles: http://www.yuanbo88.com/article.html? Rid = 44.