Типографика Mobile-First

Часть раздела Практический фронтенд путешествия по HTML на Coddy. Урок 7 из 35.

Типографика с приоритетом мобильных устройств означает, что сначала задаются стили текста, удобные для чтения на небольших экранах, а затем они адаптируются для экранов большего размера с помощью медиазапросов.

Мы используем это, потому что пользователям мобильных устройств нужны чёткие, разборчивые шрифты, которые хорошо выглядят на небольших экранах. Если текст слишком мелкий, его трудно читать, а если он слишком крупный на компьютере, он может выглядеть неуклюже.

Задайте базовый размер шрифта для мобильных устройств:

/* Стили с приоритетом мобильных устройств */
body {
  font-size: 16px; /* базовый размер для мобильных устройств */
}

h1 {
  font-size: 1.5rem;
}

Обратите внимание на единицу измерения rem, используемую для h1. rem означает root em. Она зависит от размера шрифта корневого элемента html (а не body). Поэтому, если у html задано 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. Используй селектор header h1 в медиазапросе, чтобы он переопределял размер для мобильных устройств независимо от того, где ты его установил.
- Увеличивает размер шрифта абзаца до 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>