responsive-text.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>responsive-text.html</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * { box-sizing:border-box; }
      body {
	  margin:0; padding:2vh 4vw;
	  font-size:1vw; font-family:sans-serif;
      }
      #app {
	  margin:0;
	  padding:2vh 4vw;
          border:1px solid magenta; 
      }
      #app h1 { margin:0; padding:0; }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 style="font-size:10vw;">Responsive Text</h1>
      <p style="font-size:5vw;">
	Resize the browser window to see how the text size scales.
      </p>
      <p style="font-size:5vw;">
	Use the "vw" unit when sizing the text. 10vw will set the size
	to 10% of the viewport width.
      </p>
      <p>
	Viewport is the browser window size. 1vw = 1% of viewport
	width. If the viewport is 50cm wide, 1vw is 0.5cm.
      </p>
    </div>
  </body>
</html>