EasyCode365EasyCode365

Вступ до responsive design і media queries

Responsive design допомагає вебсторінкам працювати на багатьох розмірах екрана.

Люди можуть відкрити одну й ту саму сторінку на телефоні, планшеті, laptop або великому monitor. Твій layout має адаптуватися, щоб сторінка залишалася читабельною та зручною.

Чому responsive design важливий

Layout із фіксованою шириною може добре виглядати на laptop, але ламатися на телефоні.

Наприклад, сторінка шириною 1200px може виходити за межі маленького екрана й змушувати користувача прокручувати горизонтально.

Responsive design допомагає уникнути цієї проблеми.

Хороші responsive сторінки зазвичай мають:

  • читабельний текст
  • кнопки, по яких легко натискати
  • layouts, що вміщуються на екрані
  • зображення, які не виходять за межі контейнерів

Що означає responsive design

Responsive design означає написання CSS, який підлаштовується під різні розміри екрана.

Сторінці не потрібна повністю окрема версія для кожного пристрою. Натомість той самий HTML може змінювати свій layout, коли змінюється доступний простір.

Простий responsive layout може:

  • показувати картки в одній колонці на телефонах
  • показувати дві колонки на планшетах
  • показувати три колонки на desktops

Що таке media query

Media query — це CSS-правило, яке застосовує стилі лише тоді, коли умова істинна.

Ось базовий синтаксис:

Лише читання

Простими словами, це означає:

Якщо екран має ширину щонайменше 768px, встанови для .card width: 50%.

Якщо екран вужчий за 768px, браузер ігнорує стилі всередині цієї media query.

Mobile-first design

Mobile-first означає, що спочатку ти пишеш стилі для маленьких екранів.

Цим базовим стилям не потрібна media query.

Потім ти додаєш media queries з min-width для ширших екранів.

Лише читання

У цьому прикладі картки за замовчуванням стоять одна під одною. На 768px і ширше вони стають двома колонками.

Breakpoints

Breakpoint — це ширина екрана, на якій layout змінюється.

Поширені стартові точки:

  • телефони: базові стилі
  • планшети: приблизно 768px
  • desktops: приблизно 1024px

Ці числа не є строгими правилами.

Додавай breakpoint тоді, коли це потрібно твоєму layout. Якщо сторінка починає виглядати стиснутою, розтягнутою або важкою для читання, це хороший знак, що breakpoint може допомогти.

Використання min-width

Умова min-width означає “від цієї ширини й більше”.

Лише читання

Це правило застосовується лише тоді, коли екран має ширину 1024px або більше.

min-width добре працює для mobile-first CSS, бо ти починаєш просто й додаєш складніший layout лише тоді, коли є достатньо простору.

Використання max-width

Умова max-width означає “до цієї ширини”.

Лише читання

Це правило застосовується лише тоді, коли екран має ширину 500px або менше.

max-width іноді корисний, але початківцям зазвичай легше використовувати min-width для mobile-first layouts.

Приклад responsive layout

Цей приклад показує той самий HTML і CSS у двох симульованих ширинах екрана.

Перший frame вузький, як телефон. Другий frame ширший, як маленький планшет або більший екран.

Демо використовує менші breakpoints, ніж реальний layout повної сторінки, щоб зміни були видимі в області preview уроку.

Лише читання
<div class="screen-demo">
  <div class="screen-panel">
    <p>Мобільна ширина: 320px</p>
    <iframe
      title="Preview мобільного layout"
      class="phone-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Функція 1</div>
        <div class='card'>Функція 2</div>
      </div>"
    ></iframe>
  </div>

  <div class="screen-panel">
    <p>Ширина планшета: 480px</p>
    <iframe
      title="Preview layout на планшеті"
      class="tablet-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Функція 1</div>
        <div class='card'>Функція 2</div>
      </div>"
    ></iframe>
  </div>
</div>

<style>
  .screen-demo {
    display: grid;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .screen-panel {
    overflow-x: auto;
  }

  .screen-panel p {
    margin: 0 0 8px;
    font-weight: bold;
  }

  iframe {
    height: 180px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
  }

  .phone-frame {
    width: 320px;
  }

  .tablet-frame {
    width: 480px;
  }
</style>

У frame 320px картки стоять в одній колонці, бо жодна media query ще не спрацьовує.

У frame 480px query min-width: 400px спрацьовує, тому картки переходять у дві колонки.

Як зробити зображення responsive

Великі зображення можуть виходити за межі вузьких контейнерів.

Це невелике правило допомагає зображенням вміщуватися в батьківський контейнер:

Лише читання

max-width: 100% не дозволяє зображенню стати ширшим за свій контейнер.

height: auto зберігає правильні пропорції зображення, коли воно зменшується.

Поширені помилки початківців

  • Використовувати фіксовану ширину в пікселях для всієї сторінки: контейнер 1200px може виходити за межі екрана на телефонах. Використовуй гнучкі ширини або max-width для великих контейнерів.
  • Спочатку писати desktop styles: часто складніше скасовувати складний desktop layout для mobile, ніж почати просто й додавати більші layouts пізніше.
  • Додавати забагато breakpoints: не пиши media query для кожного пристрою. Додавай breakpoint тоді, коли layout справді цього потребує.
  • Забувати тестувати вузькі екрани: зменшуй ширину вікна браузера й перевіряй, що текст, кнопки й layout усе ще вміщуються.

Мініпрактика

Напиши media query з min-width, яка змінює .menu з однієї колонки на дві колонки на 768px.

Використай:

Лише читання

Короткий тест із відповідями

  1. З чим допомагає responsive design?
  2. Що означає min-width: 768px?
  3. Чому max-width: 100% корисний для зображень?

Відповіді:

  1. Він допомагає сторінкам залишатися читабельними й зручними на різних розмірах екрана.
  2. Стилі застосовуються, коли екран має ширину 768px або більше.
  3. Це не дозволяє зображенням виходити за межі батьківських контейнерів.

Відповідь на мініпрактику:

Лише читання

Маленький виклик

Спробуй створити responsive grid продуктів.

  1. Перетвори .product-grid на grid.
  2. Додай gap 16px.
  3. Залиши одну колонку за замовчуванням.
  4. На 400px зміни layout на дві колонки.
  5. На 600px зміни layout на три колонки.
Можна редагувати
<div class="product-grid">
  <div class="item">Продукт A</div>
  <div class="item">Продукт B</div>
  <div class="item">Продукт C</div>
  <div class="item">Продукт D</div>
  <div class="item">Продукт E</div>
  <div class="item">Продукт F</div>
</div>

<style>
  .item {
    padding: 30px;
    text-align: center;
    font-family: Arial, sans-serif;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .product-grid {
    /* 1. Перетвори це на grid */

    /* 2. Додай gap 16px */

    /* 3. Одна колонка є стандартною, тому правило для колонок не потрібне */
  }

  /* 4. На 400px використовуй дві колонки */
  @media (min-width: 400px) {
    .product-grid {
    }
  }

  /* 5. На 600px використовуй три колонки */
  @media (min-width: 600px) {
    .product-grid {
    }
  }
</style>

Одна можлива відповідь:

Лише читання

Підсумок

  • Responsive design допомагає сторінкам адаптуватися до різних розмірів екрана.
  • Media queries застосовують CSS лише тоді, коли умова істинна.
  • Mobile-first CSS починається зі стилів для маленьких екранів.
  • min-width застосовує стилі від breakpoint і ширше.
  • max-width застосовує стилі до breakpoint.
  • Breakpoints мають базуватися на потребах layout.
  • Responsive зображення використовують max-width: 100% і height: auto.