Mobil Öncelikli Tipografi

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 7 / 35.

Önce Mobil İçin Tipografi, küçük ekranlarda okunması kolay metin stilleriyle başlayıp ardından bunları medya sorgularıyla daha büyük ekranlara uyarlamak anlamına gelir.

Mobil kullanıcıların küçük ekranlarda iyi çalışan net ve okunaklı yazı tiplerine ihtiyacı olduğu için bunu kullanırız. Metin çok küçük olursa okunması zorlaşır; masaüstünde çok büyük olursa da tuhaf görünebilir.

Mobil için temel yazı tipi boyutunu ayarlayın:

/* Önce mobil için tasarlanmış stiller */
body {
  font-size: 16px; /* mobil için temel boyut */
}

h1 {
  font-size: 1.5rem;
}

h1 için kullanılan rem birimine dikkat edin. rem, root em anlamına gelir. Kök öğenin, yani html öğesinin yazı tipi boyutuna göredir (body öğesinin değil). Dolayısıyla html için font-size: 16px ayarlanmışsa (tarayıcının varsayılanı), 1.5rem, 24px değerine eşittir. rem kullanmak, yalnızca temel boyutu değiştirerek tüm metinlerinizi tutarlı biçimde ölçeklendirmenizi kolaylaştırır.

Ardından daha büyük ekranlara göre ayarlama yapmak için medya sorgularını kullanın:

/* Daha büyük ekranlar */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Görev

Kolay

Görevin:

<h1> başlığının yazı tipi boyutunu mobilde 24px yap.
<p> paragrafının yazı tipi boyutunu mobilde 16px yap.
768px'den daha geniş ekranlar için şu koşulları sağlayan bir medya sorgusu oluştur:
- <h1> başlığının yazı tipi boyutunu 36px değerine yükselt. Medya sorgusunda header h1 seçicisini kullan; böylece mobil boyutunu nerede ayarlarsan ayarla, üzerine yazılır.
- Paragrafın yazı tipi boyutunu 20px değerine yükselt.

Kendin dene

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