모바일 CSS 단위 “vh” 및 “vw”

1. 서문:

반응형 웹 디자인은 비율과 떼려야 뗄 수 없습니다. 그러나 CSS 백분율이 모든 문제에 대한 최선의 해결책은 아닙니다. CSS 너비는 이를 포함하는 가장 가까운 상위 요소의 너비를 기준으로 합니다. 하지만 상위 요소 대신 뷰포트의 너비나 높이만 사용하려면 어떻게 해야 할까요?

2. "vh" & "vw":

vh: 창 높이 기준: 창 높이는 100vh입니다.

vw: 창 너비 기준: 창 너비는 100vw입니다.

'

3. 소스코드:

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%: <strong class="js-getVW1">0</strong></div>
<div class="demo-2">视窗的25%: <strong class="js-getVW2">0</strong></div>
<div class="demo-3">视窗的50%: <strong class="js-getVW3">0</strong></div>
<div class="demo-4"><span>视窗的100%高度<br/>（看我！！！）</span></div>
<p class="btn-normal">看我！！！看我...！！！我是浏览器视窗的宽度（你可以通过改变浏览器宽度看我的变化）：<span class="js-viewWidth">0</span></p>

JS :

$(function(){
  //视窗宽度改变函数
  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);
  }
 
  //初始化
  resizeWindow();
   
  //浏览器视窗改变时调用上面定义的函数
  $(window).resize(function(event) {
    resizeWindow();
  });
});

관심 있는 학생은 원문을 확인하세요: http://www.yuanbo88.com/article.html?rid=44.