Примеры — Урок 31

Рабочие примеры

В каждом примере сверху реальный результат, ниже — код. Меняй ширину окна, чтобы увидеть реакцию.

1. meta viewport — обязательная строка

Эта строка идёт в <head>. Без неё мобильный браузер «притворяется» десктопом ~980px и уменьшает страницу — текст становится крошечным. Ниже две имитации одной страницы на телефоне.

❌ Без meta viewport

Заголовок страницы
Текст ужался, чтобы влезли все 980px десктопной ширины. Читать невозможно.

✅ С meta viewport

Заголовок
Текст подобран под ширину телефона. Читается нормально.

<!-- lesson-31/index.html, внутри <head> -->
<meta name="viewport"
      content="width=device-width, initial-scale=1">

2. vw / vh — размер от окна

В превью контейнер играет роль «окна»: синий блок занимает 50vw ширины. В реальной странице vw считается от ширины всего окна браузера, а не от родителя.

width: 50vw — половина ширины окна

25vw

.banner { width: 50vw; height: 80px; }
.quarter { width: 25vw; height: 50px; }
/* 1vw = 1% ширины окна браузера */

3. DPR — почему растровая картинка размывается

Слева «1×» исходник, растянутый на retina: видны крупные блоки-точки. Справа «2×» исходник того же CSS-размера выглядит чётче.

1× на DPR 2 → размыто

2× → чётко

<!-- логотип 200×200 CSS-px -->
<img src="logo.png"        width="200" height="200">     <!-- 1×: мутно на retina -->
<img srcset="logo@2x.png 2x" src="logo.png"
     width="200" height="200">   <!-- файл 400×400 для DPR 2 -->

4. Breakpoint по содержимому

Карточка: на узком экране — одна колонка, начиная с 48rem — две. Раздвинь окно браузера и увидишь перестроение.

img

HTML & CSS
На широком viewport картинка и текст стоят рядом в две колонки.

/* lesson-31/styles.css */
.product-card {
  width: min(100%, 42rem);
  margin-inline: auto;
  padding: 1rem;
}
@media (min-width: 48rem) {     /* breakpoint по содержимому */
  .product-card {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 1.5rem;
  }
}

5. Проверить DPR и ширину из JS

Полезно при отладке: значения берутся прямо из текущего окна. Ниже — пример того, что покажет консоль на retina-ноутбуке.

              > window.devicePixelRatio

              2

              > window.innerWidth

              1280

<script>
  console.log(window.devicePixelRatio); // DPR экрана
  console.log(window.innerWidth);       // ширина viewport в CSS-px
</script>

Эксперимент: открой DevTools (F12) → режим устройства, переключай телефон/планшет/десктоп и смотри, какие @media-правила становятся активными.

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