CodePen

HTML

            
              <div>
	  <p style="background:#ff7a7a;">p #1</p>
	  <p style="background:#ff8c8c;">p #2</p>
	  <p style="background:#ffa1a1;">p #3</p>
	  <p style="background:#ffadad;">p #4</p>
	  <p style="background:#ffbaba;">p #5</p>
	  <p style="background:#ffc7c7;">p #6</p>
	  <p style="background:#ffd6d6;">p #7</p>
	  <p style="background:#ffe6e6;">p #8</p>
	  <p style="background:#fff5f5;">p #9</p>
	  <p style="background:#f5f5f5;">p #10</p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * { 
	  margin:0;
	  padding:0;
}

p {
	  box-shadow:inset 0 0 2px #222;
	  width:100%;
	  height:10vh;
	  padding:3vh;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(window).resize(function() {
    $('p').css('height','10vh');
});

// BEST WAY TO SEE THIS IN ACTION IS TO CHANGE THE VIEWS..

// GO NEXT TO KEYBOARD AND SWITCH

// OR

// PLUG THIS INTO YOUR OWN HTML FILE
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................