移动优先排版

本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 7 课，共 35 课。

移动端优先的排版是指先设置适合在小屏幕上阅读的文本样式，再使用媒体查询针对大屏幕进行调整。

我们使用它，是因为移动设备用户需要在小屏幕上也清晰易读的字体。文字太小会难以阅读，而在桌面设备上太大则会显得不协调。

为移动设备设置基础字号：

/* 移动端优先的样式 */
body {
  font-size: 16px; /* 移动端的基础字号 */
}

h1 {
  font-size: 1.5rem;
}

注意，h1 使用了 rem 单位。rem 是 root em 的缩写。它相对于根元素 body 的字号。如果 body 的 font-size: 16px，那么 1.5rem 就等于 24px。使用 rem 可以让你只需更改基础字号，就能轻松地统一缩放所有文本。

然后使用媒体查询来适配更大的屏幕：

/* 较大的屏幕 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

挑战

简单

你的任务：

将移动设备上 <h1> 标题的字体大小设为 24px。
将移动设备上 <p> 段落的字体大小设为 16px。
为屏幕宽度大于 768px的情况创建媒体查询：
- 将 <h1> 标题的字体大小增大到 36px。
- 将段落的字体大小增大到 20px。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Typography</title>
  <style>
    /* ===== Mobile-First Styles ===== */
    :root {
      --base-font-size: 16px; 
    }

    body {
      font-size: var(--base-font-size);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.5;
      background-color: #f0f8ff;
      color: #333;
    }

    header {
      background: url('https://upload.wikimedia.org/wikipedia/commons/a/af/Female_polar_bear_%28Ursus_maritimus%29_with_cub%2C_Svalbard.jpg')
                  center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 50px 20px;
    }

    header h1 {
      margin: 0;
    }

    .subtitle {
      margin-top: 10px;
      font-size: 1rem;
      opacity: 0.9;
    }

    main {
      padding: 20px;
    }

    h2 {
      color: #2c6e91;
      font-size: 1.25rem;
    }

    ul {
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
    }

    footer {
      background-color: #2c6e91;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 0.9rem;
    }

    /* ===== Larger Screens ===== */

  </style>
</head>
<body>
  <header>
    <h1>Polar Bears – Kings of the Arctic</h1>
    <p class="subtitle">Discover the life of the world's largest land carnivore</p>
  </header>

  <main>
    <section>
      <h2>About Polar Bears</h2>
      <p>
        Polar bears are magnificent animals that live in the Arctic region. 
        They are excellent swimmers, using their large paws to paddle through icy waters 
        in search of seals, their main source of food. These bears have thick layers of 
        fat and dense fur to keep them warm in extreme cold.
      </p>
    </section>

    <section>
      <h2>Interesting Facts</h2>
      <ul>
        <li>Polar bears can weigh up to 700 kg (1,500 lbs).</li>
        <li>They have black skin under their white fur to absorb heat.</li>
        <li>Polar bears can swim for days without resting.</li>
        <li>They are listed as vulnerable due to climate change.</li>
      </ul>
    </section>

    <section>
      <h2>Protecting Polar Bears</h2>
      <p>
        Climate change and melting sea ice threaten polar bear habitats. 
        Protecting these amazing creatures requires global efforts to 
        reduce greenhouse gas emissions and preserve their Arctic environment.
      </p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Arctic Wildlife. All rights reserved.</p>
  </footer>
</body>
</html>