title: CSS Units - What is the difference between vh/vw and %?
body: <p>I just learned about a new and uncommon CSS unit. <code>vh</code> and <code>vw</code> measure the percentage of height and width of the viewport respectively.</p>
  
  <p>I looked at this question from Stack Overflow, but it made the units look even more similar.</p>
  
  <p><a href="https://stackoverflow.com/questions/24876368/how-does-vw-and-vh-unit-works">How does vw and vh unit works</a></p>
  
  <p>The answer specifically says</p>
  
  <blockquote>
    <p>vw and vh are a percentage of the window width and height,
    respectively: 100vw is 100% of the width, 80vw is 80%, etc.</p>
  </blockquote>
  
  <p>This seems like the exact same as the <code>%</code> unit, which is more common.</p>
  
  <p>In Developer Tools, I tried changing the values from vw/vh to % and viceversa and got the same result.</p>
  
  <p>Is there a difference between the two? If not, why were these new units introduced to <code>CSS3</code>?</p>