<h4>螢幕解析度</h4>
<div>width: <span class="width"></span>px</div>
<div>height: <span class="height"></span>px</div>

<h4>hw, vh</h4>
<small>裝置長寬/100的px值，是一種會依裝置不同而變動的大小</small>
<p class="vh_description">正在計算你的vh</p>
<p class="vw_description">正在計算你的vw</p>

<div class="vh"></div>
<div class="vw"></div>

.vh {
 position: absolute;
 right: 0;
 top: 0;
 background-color: rgba(255, 0, 0, .5);
 width: 20vw;
 height: 1vh;
 &::before {
  content: '↑1vh';
  position: absolute;
  top: 100%;
  vertical-align:middle;
 }
}

.vw {
 position: absolute;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 255, 0, .5);
 width: 1vw;
 height: 20vh;
  &::before {
  content: '→\A 1vw';
  position: absolute;
  right: 100%;
  text-align: right;
  white-space: pre-line;  
 }
}

setInterval(show, 1000);

function show() {
  $('.width').html(screen.width);
  $('.height').html(screen.height);
  $('.vh_description').html(`右上角是1vh的高度, 在此裝置上的大小是${screen.width/100}px`)
  $('.vw_description').html(`右下角是1vw的寬度, 在此裝置上的大小是${screen.height/100}px`)
}