Урок 31. Решения: Проблемы разных экранов: viewport и DPR

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~65 мин 🎯 Сложность: Средняя
#meta #viewport #image-set

⚡ Кратко

Решение задания 2: meta viewport + карточка width: min(100%, 42rem), которая на 48rem превращается в grid из двух колонок. Для задания 3: при DPR 2 нужен файл 300×300 px.

Возможное решение задания 2

Ниже не единственный правильный вариант, но он показывает рабочую идею урока без лишних зависимостей. Сверху — живой результат (на широком экране две колонки).

cover@2x
HTML & CSS
width: min(100%, 42rem) — не шире 42rem и не выходит за контейнер.
<!-- lesson-31/solution.html -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<section class="product-card">
  <img src="cover@2x.jpg" alt="Обложка курса">
  <h2>HTML & CSS</h2>
</section>
📄 lesson-31/solution.css
.product-card {
  width: min(100%, 42rem);
  margin-inline: auto;
  padding: 1rem;
}

@media (min-width: 48rem) {
  .product-card {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 1.5rem;
  }
}

Решение задания 3 (DPR)

Если window.devicePixelRatio === 2, то на 1 CSS-пиксель приходится 2 физических. Логотип 150×150 CSS-px займёт 300×300 физических точек, поэтому исходный файл должен быть 300×300 px (для DPR 3 — 450×450 px).

Самопроверка: если при изменении ширины появляется горизонтальный скролл, вернитесь к ограничениям контейнера и ширине дочерних элементов; проверьте, не использован ли 100vw там, где нужен 100%.

Навигация