Установка размера шрифта 62,5% для html с метатегом viewport приводит к тому, что текст в мобильном представлении становится слишком маленьким

Question

Для более легкого расчета rems я установил размер шрифта html на 62,5% и установил размер шрифта на 1,6 rem в своем теле.У меня также есть метатег viewport.Похоже, что метатег игнорирует размер шрифта, установленный для тела, и в результате текст слишком мал для мобильных устройств.Есть ли способ исправить это без явной установки всех размеров шрифта, используемых в моем медиа-запросе для смартфонов?

Просмотр CodePen

    html {
  /* Applying so that 1rem will equal 10px for easier calculation; default font-size in browsers is 16px, and 62.5% of 16px is 10px. 0.1rem now equals 1px, 1.6rem = 16px */
  /* Note: Viewport meta tag bases font size on this 10px so have to explicitly define font sizes in media query, otherwise text will be very small */
  font-size: 62.5%;
}

body {
  font-family: Muli, sans-serif;
  margin: 0;
  font-size: 1.6rem;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto 38rem auto auto 42rem auto auto;

  grid-template-areas:
    "header header"
    "image intro"
    "pricing pricing"
    "banner banner"
    "portrait about"
    "contact contact"
    "banner2 banner2"
    "video video"
    "footer footer";
}

* {
  box-sizing: border-box;
}

header {
  /* Unlike position: fixed; doesn't overlap content that follows header */
  position: sticky;
  /* Needed for use of position: sticky; */
  top: 0;
  grid-area: header;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3.8rem 0 4.3rem;
}

.header-img {
  height: 4rem;
  padding-right: 1.4rem;
}

.title {
  display: flex;
  align-items: center;
}

h1 {
  font-size: 3.5rem;
  padding: 0 1.1rem 0 0;
  font-family: Satisfy, cursive;
  font-weight: 300;
  color: #dbb42f;
}

header p {
  font-size: 1.9rem;
  color: #7d7a7a;
  font-weight: 300;
}

nav ul {
  display: flex;
  list-style-type: none;
  /* Removing because it causes whitespace on the side (in mobile view) after adding position: sticky, top: 0, width: 100% to header */
  margin: 0;
}

nav ul li {
  padding: 1.8rem;
  font-size: 1.7rem;
  text-decoration: none;
}

nav ul li a {
  text-decoration: none;
  color: #5c5a5a;
}

h2 {
  font-size: 2.2rem;
  margin: 4rem 0 3.5rem 0;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.4rem;
  text-transform: uppercase;
  color: #737373;
}

.bouquet {
  grid-area: image;
  background-image: url(https://raw.githubusercontent.com/nataliecardot/landing-page/master/img/bouquet.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.intro-text {
  background-color: #faf6dc;
  grid-area: intro;
  display: flex;
  align-items: center;
  /* Less padding on top and bottom to account for extra space above and below p element */
  padding: 3rem 5.5rem 3rem 5.5rem;
}

.intro-text-paragraphs {
  font-size: 1.75rem;
  text-align: justify;
  font-weight: 300;
}

.pricing {
  grid-area: pricing;
  background-color: #faf0f0;
}

.pricing-levels {
  margin: 3rem 0 5rem 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.pricing-level {
  background-color: #fff;
  text-align: center;
  padding: 5rem;
  margin: 0 1rem;
}

.pricing-level ul {
  text-align: left;
}

.pricing button {
  background-color: #c95572;
  cursor: pointer;
  border-radius: 0.4rem;
  color: white;
  font-size: 1em;
  height: 4rem;
  width: 9.6rem;
  margin: 2.5rem 0 1rem 0;
  border: none;
}

.banner {
  grid-area: banner;
  background-image: url(https://raw.githubusercontent.com/nataliecardot/landing-page/master/img/desk-roses.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.banner2 {
  grid-area: banner2;
  background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/holding-hands.jpg?raw=true);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.portrait {
  grid-area: portrait;
  background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/holding-camera.jpg?raw=true);
  background-size: cover;
  background-position: center;
}

.portrait img {
  max-width: 100%;
}

.about {
  grid-area: about;
  background-color: #faf0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.about h2 {
  margin-bottom: 1.5rem;
}

.about-text {
  width: 82%;
  margin: 0 0 5rem 0;
  font-weight: 300;
}

.contact {
  background-color: #faf6dc;
  grid-area: contact;
}

.video {
  grid-area: video;
  background-color: #faf0f0;
  padding: 5rem;
  display: flex;
  justify-content: center;
}

footer {
  background-color: #f2f2f2;
  grid-area: footer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 3rem 0;
}

footer i {
  padding: 1.6rem;
  color: #7d7a7a;
}

footer p {
  font-size: 1.6rem;
  letter-spacing: 0.15rem;
  /* Same color as for header p, social icons */
  color: #7d7a7a;
  padding-bottom: 1rem;
}

.footer-button {
  cursor: pointer;
}

.form-left {
  display: inline-block;
  text-align: right;
  width: 30%;
  padding-right: 0.9rem;
  margin-top: 1rem;
  /* Matches h2 text */
  color: #737373;
}

.form-right {
  display: inline-block;
  text-align: left;
  width: 40%;
  vertical-align: middle;
}

.form-item {
  margin: 1.8rem 0;
}

/* font-family set in body didn't apply; per /2081457/pochemu-textarea-i-textfield-ne-prinimayt-semeistvo-shriftov-i-razmer-shrifta-iz-osnovnogo-teksta "browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using" Adding font-family: inherit is workaround */
input {
  padding: 1.3rem;
  border-radius: 0.2rem;
  border: none;
  font-family: inherit;
}

textarea {
  padding: 1.3rem;
  height: 15rem;
  border: none;
  border-radius: 0.2rem;
  font-family: inherit;
}

.contact-button {
  /* This works because buttons are display: inline-block by default */
  text-align: center;
}

.submit-button {
  background-color: #e2a929;
  cursor: pointer;
  border-radius: 0.4rem;
  color: white;
  font-size: 1em;
  height: 4rem;
  width: 9.6rem;
  margin: 2.5rem 0 4.5rem 0;
  border: none;
}

i:hover, button:hover {
  transform: scale(1.1);
}

/* Special styling for smartphones */
@media screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 40rem auto auto 50rem auto 50rem auto 42rem auto auto;

    grid-template-areas:
      "header"
      "image"
      "intro"
      "pricing"
      "portrait"
      "about"
      "banner"
      "contact"
      "banner2"
      "video"
      "footer";
  }

  header {
    flex-direction: column;
    align-items: center;
  }

  nav ul {
    display: none;
  }

  .intro-text {
    /* 1.75rem normally */
    font-size: 1.6rem;
    padding: 2rem 4rem 2rem 4rem;
  }

  .pricing-levels {
    flex-direction: column;
  }

  .pricing-levels:last-child {
    margin-bottom: 4rem;
  }

  .pricing-level {
    /* left/right margin 1rem normally */
    margin: 1.5rem 4rem;
  }

  .pricing-level:first-child {
    margin-top: 0;
  }

  .about-text {
    margin-bottom: 3rem;
  }

  .banner {
    /* Only using this image for mobile, since it fits better */
    background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/couple-heart.jpg?raw=true);
    justify-content: center;
    background-position: center;
  }

  form {
    text-align: center;
  }

  .form-left {
    width: 85%;
    padding-right: 0;
    text-align: left;
    font-weight: bold;
  }

  .form-right {
    width: 85%;
    margin-top: 1.2rem;
  }

  .form-item {
    margin: 1rem 0;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Luminescence Photography</title>
    <!-- Ensures proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Forces IE 8/9/10 to use its latest rendering engine -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Muli:300,400|Open+Sans|Satisfy" rel="stylesheet">
    <link rel="stylesheet" href="stylesFCC.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <header id="header">
        <div class="title">
          <img src="http://i63.tinypic.com/bfq8gz.png" id="header-img" class="header-img">
          <h1>Luminescence</h1>
          <p>Photography</p>
        </div>
        <nav id="nav-bar">
          <ul>
            <li><a class="nav-link" href="#pricing">Pricing</a></li>
            <li><a class="nav-link" href="#about">About</a></li>
            <li><a class="nav-link" href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div class="bouquet"></div>
      <div class="intro-text">
        <div class="intro-text-paragraphs">
          <p>Malis omnes in nec, cu accusam efficiantur mel. Eum populo doctus intellegam no, te sonet ancillae reformidans pro. Ei sea congue consul, animal platonem corrumpit te nam. Ex decore offendit est, nihil deterruisset eu quo.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
          elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient
          montes, nascetur ridiculus mus.</p>
          <p>Sea at debet maiorum antiopam. Est prima option ne. Choro habemus scaevola cu cum, aperiam aliquid voluptatibus eu vis. His te sint stet quas, stet justo everti nam eu, in mundi comprehensam vis.</p>
        </div>
      </div>
      <section class="pricing" id="pricing">
        <h2>Pricing</h2>
        <div class="pricing-levels">
          <div class="pricing-level">
            <h3>$500</h3>
            <ul>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ul>
            <button>Select</button>
          </div>
          <div class="pricing-level">
            <h3>$800</h3>
            <ul>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ul>
            <button>Select</button>
          </div>
          <div class="pricing-level">
            <h3>$1100</h3>
            <ul>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ul>
            <button>Select</button>
          </div>
        </div>
      </section>

      <div class="banner">
      </div>

      <div class="banner2">
      </div>

      <div class="portrait">
      </div>

      <section class="about" id="about">
        <h2>About</h2>
        <div class="about-text">
          <p>Lorem ipsum dolor sit amet, agam dicat perpetua his eu. Et docendi perfecto definitionem mel. Tollit tibique omittam at eos, id his ubique putent assentior. Nobis euripidis vix cu, ut liber oblique has.</p>
          <p>Mei no quidam delicata euripidis. No cibo malorum deserunt usu, has ad dicat vitae possit. Ne affert accumsan eos, vis vide errem temporibus an. Nam cu atqui labore, ea sumo sale sea.</p>
          <p>Sea et assum oporteat eleifend, te prima constituto nec. Ex volumus mentitum vituperata cum, facer libris ut cum, dignissim scriptorem intellegebat usu ei. Menandri prodesset similique vix in, ea duo nihil signiferumque.</p>
          <p>Pro adhuc posse tamquam at, at sed nulla labore, quo vero deseruisse ut. Nam error facilisis torquatos ex. Praesent ac tellus luctus nibh congue dictum. Curabitur non suscipit urna. Phasellus vehicula ligula risus, vitae consectetur eros tempor in.</p>
        </div>
      </section>

      <section class="contact" id="contact">
        <h2>Contact</h2>

        <form>
          <div class="form-item">
            <label for="name" class="form-left">Name</label>
            <input class="form-right" type="text" id="name" placeholder="Enter your name" required>
          </div>

          <div class="form-item">
            <label for="email" class="form-left">Email</label>
            <input type="email" class="form-right" placeholder="Enter your email" required>
          </div>

          <div class="form-item">
            <label for="message" class="form-left">Message</label>
            <textarea class="form-right" id="message" placeholder="Enter a message"></textarea>
          </div>

          <div class="contact-button">
            <button type="submit" class="submit-button">Submit</button>
          </div>

          <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/usmw4-XL_u8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen  id="video"></iframe>
          </div>

        </form>
      </section>

      <footer>
        <div>
          <a href="#"><i class="fab fa-facebook-f fa-2x"></i></a>
          <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
          <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
        </div>
        <p>© 2019 Natalie Cardot</p>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input name="email" id="email" type="email" placeholder="Enter your email" required>
          <!-- A button with type submit has the same function. I'd use button but here must use input to satisfy freeCodeCamp project test suite -->
          <input class="footer-button" id="submit" type="submit" value="Get started">
        </form>
      </footer>
    </div>
  </body>
</html>