Typografia w podejściu mobile-first

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 7 z 35.

Typografia mobile-first oznacza rozpoczęcie od stylów tekstu, które są łatwe do czytania na małych ekranach, a następnie dostosowanie ich do większych ekranów za pomocą zapytań medialnych.

Używamy go, ponieważ użytkownicy urządzeń mobilnych potrzebują czytelnych i wyraźnych czcionek, które dobrze wyglądają na małych ekranach. Jeśli tekst jest zbyt mały, trudno go odczytać, a jeśli na komputerze jest zbyt duży, może wyglądać niezręcznie.

Ustaw podstawowy rozmiar czcionki dla urządzeń mobilnych:

/* Style dostosowane najpierw do urządzeń mobilnych */
body {
  font-size: 16px; /* podstawowy rozmiar dla urządzeń mobilnych */
}

h1 {
  font-size: 1.5rem;
}

Zwróć uwagę na jednostkę rem używaną dla h1. rem to skrót od root em. Jest względna do rozmiaru czcionki elementu głównego body. Jeśli więc body ma font-size: 16px, to 1.5rem równa się 24px. Użycie rem ułatwia spójne skalowanie całego tekstu przez zmianę samego rozmiaru podstawowego.

Następnie użyj zapytań o media, aby dostosować stronę do większych ekranów:

/* Większe ekrany */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Wyzwanie

Łatwy

Twoje zadanie:

Ustaw rozmiar czcionki nagłówka <h1> na 24px na urządzeniach mobilnych.
Ustaw rozmiar czcionki akapitu <p> na 16px na urządzeniach mobilnych.
Utwórz zapytanie o media dla ekranów szerszych niż 768px, które:
- Zwiększa rozmiar czcionki nagłówka <h1> do 36px.
- Zwiększa rozmiar czcionki akapitu do 20px.

Spróbuj swoich sił

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