Kiểu chữ ưu tiên thiết bị di động

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 7 trên 35.

Kiểu chữ ưu tiên thiết bị di động nghĩa là bắt đầu với kiểu chữ dễ đọc trên màn hình nhỏ, sau đó điều chỉnh cho màn hình lớn hơn bằng truy vấn phương tiện.

Chúng ta dùng nó vì người dùng thiết bị di động cần phông chữ rõ ràng, dễ đọc, hiển thị tốt trên màn hình nhỏ. Nếu chữ quá nhỏ, bạn sẽ khó đọc; còn nếu chữ quá lớn trên máy tính, giao diện có thể trông mất cân đối.

Thiết lập cỡ chữ cơ bản cho thiết bị di động:

/* Kiểu dáng ưu tiên thiết bị di động */
body {
  font-size: 16px; /* Kích thước cơ bản cho thiết bị di động */
}

h1 {
  font-size: 1.5rem;
}

Lưu ý đơn vị rem được dùng cho h1. rem là viết tắt của root em. Đơn vị này dựa trên cỡ chữ của body gốc. Vì vậy, nếu body có font-size: 16px, thì 1.5rem bằng 24px. Dùng rem giúp bạn dễ dàng điều chỉnh đồng nhất cỡ chữ bằng cách chỉ thay đổi cỡ chữ cơ bản.

Sau đó, dùng media query để điều chỉnh cho màn hình lớn hơn:

/* Màn hình lớn hơn */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Thử thách

Dễ

Nhiệm vụ của bạn:

Đặt cỡ chữ của tiêu đề <h1> là 24px trên thiết bị di động.
Đặt cỡ chữ của đoạn văn <p> là 16px trên thiết bị di động.
Tạo truy vấn phương tiện cho màn hình rộng hơn 768px để:
- Tăng cỡ chữ của tiêu đề <h1> thành 36px.
- Tăng cỡ chữ của đoạn văn thành 20px.

Tự làm thử

<!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>