learn/rwd/type-rwd.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Demonstration of responsive typography</title>
    <style>
      html {
        font-size: 1em;
      }

      body {
        font:
          1.2em Helvetica,
          Arial,
          sans-serif;
        margin: 20px;
        padding: 0;
        background-color: #eee;
      }
      .wrapper {
        max-width: 960px;
        margin: 2em auto;
      }

      h1 {
        font-size: 2rem;
        margin: 0;
      }

      .col1,
      .col2 {
        background-color: #fff;
      }

      @media screen and (min-width: 600px) {
        .wrapper {
          display: grid;
          grid-template-columns: 1fr 2fr;
          column-gap: 5%;
        }

        h1 {
          font-size: 4rem;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="col1">
        <h1>Watch my size!</h1>
        <p>
          This layout is responsive. See what happens if you make the browser
          window wider or narrow.
        </p>
      </div>
      <div class="col2">
        <p>
          One November night in the year 1782, so the story runs, two brothers
          sat over their winter fire in the little French town of Annonay,
          watching the grey smoke-wreaths from the hearth curl up the wide
          chimney. Their names were Stephen and Joseph Montgolfier, they were
          papermakers by trade, and were noted as possessing thoughtful minds
          and a deep interest in all scientific knowledge and new discovery.
        </p>
        <p>
          Before that night—a memorable night, as it was to prove—hundreds of
          millions of people had watched the rising smoke-wreaths of their fires
          without drawing any special inspiration from the fact.”
        </p>
      </div>
    </div>
  </body>
</html>