Старый подход
Жёсткие размеры и поздние исправления часто создают горизонтальный скролл, слишком длинные строки или нечитаемые карточки. На узком экране фиксированные 1200px не помещаются:
width: 1200px — не влезает в телефон, нужен горизонтальный скролл →
/* lesson-31/old.css */
.page { width: 1200px; }
.hero { background-image: url(hero-small.jpg); }Современный подход
Сначала задаём гибкую основу, затем добавляем breakpoint только там, где он действительно улучшает содержимое. Блок никогда не выходит за окно:
min(100% - 2rem, 72rem) — всегда внутри окна, с отступами
/* lesson-31/modern.css */
.page {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.hero {
background-image: image-set(
url(hero.jpg) 1x,
url(hero@2x.jpg) 2x /* чёткость на retina */
);
}