Css 为带有viewport meta标记的html设置62.5%的字体大小会导致移动视图中的文本太小

为了更容易地计算rems，我在我的身体中将html字体大小设置为62.5%，并将字体大小设置为1.6 rem。我还有视口元标记。看起来meta标记忽略了为body设置的字体大小，因此，在mobile上文本太小了。 有没有办法在不明确设置智能手机媒体查询中使用的所有字体大小的情况下解决这个问题

发光照相
发光
摄影






nec中的欧姆内斯，cu accusam efficiantur mel。欧洲民粹主义知识博士课程编号，改革派专业课程编号。艾海康格领事，动物柏拉图·科伦皮特·纳姆。装潢得罪了它，但没有阻止欧盟现状

Lorem ipsum dolor sit amet，Concertetuer Adipising
精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
产难者自然社会
蒙特斯，那塞图尔河

在debet maiorum antiopam出海。这是最重要的选择。一杯咖啡，一杯开胃酒。他在蒙迪的圣斯泰特·卡斯，斯泰特·朱斯托·埃弗蒂·南欧

定价
$500

同侧眼线
同侧眼线
洛雷姆·伊普苏姆·多洛
同侧眼线

挑选
$800

同侧眼线
同侧眼线
洛雷姆·伊普苏姆·多洛
同侧眼线

挑选
$1100

同侧眼线
同侧眼线
洛雷姆·伊普苏姆·多洛
同侧眼线

挑选
关于
Lorem ipsum Door sit amet，agam致力于维持他的欧盟。这是一个完美的定义。Tollit tibique Omitam在eos，这是他的ubique公认的资产。欧里庇斯之王，自由之王

我是欧里庇蒂斯之神。没有一个人值得我们去做，他有一个明确的生命。不影响累计eos，视时间而定。Nam cu atqui labore，ea相扑销售海

海上和海上交通，主要由nec组成。前卷《越狱》和《自由之脸》以及《智慧之书》。我们的产品与我们的产品相似，但却没有什么意义

亲阿杜克团队在，在，在，在，在，在。不可否认的错误是不可否认的。非苏西比特乌纳库拉索酒店。车辆通行证、通行证、临时通行证

接触
名称
电子邮件
消息
提交
©2019娜塔莉·卡多特

    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 https://stackoverflow.com/questions/2874813/why-textarea-and-textfield-not-taking-font-family-and-font-size-from-body "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>