Mobil Öncelikli Tipografi

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

Mobile-First Typography, küçük ekranlarda kolay okunabilen metin stilleriyle başlamak ve ardından bunları media sorgularıyla daha büyük ekranlar için ayarlamak anlamına gelir.

Bunu kullanırız çünkü mobil kullanıcıların küçük ekranlarda iyi çalışan net, okunaklı yazı tiplerine ihtiyacı vardır. Metin çok küçükse okunması zorlaşır; masaüstünde çok büyükse garip görünebilir.

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

/* Mobile-first styles */
body {
  font-size: 16px; /* base size for mobile */
}

h1 {
  font-size: 1.5rem;
}

h1 için kullanılan rem birimine dikkat edin. rem, root em ifadesinin kısaltmasıdır. Kök body yazı tipi boyutuna görelidir. Dolayısıyla body içinde font-size: 16px varsa 1.5rem, 24px değerine eşittir. rem kullanmak, yalnızca temel boyutu değiştirerek tüm metninizi tutarlı bir şekilde ölçeklendirmeyi kolaylaştırır.

Ardından daha büyük screens için media sorgularını kullanarak ayarlayın:

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

Görev

Kolay

Göreviniz:

<h1> başlığının yazı tipi boyutunu mobile üzerinde 24px yapın.
<p> paragrafının yazı tipi boyutunu mobile üzerinde 16px yapın.
768px'den daha geniş screens için bir medya sorgusu oluşturun; bu sorgu:
- <h1> başlığının yazı tipi boyutunu 36px değerine artırır.
- Paragrafın yazı tipi boyutunu 20px değerine artırır.

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>