Почему ваш сайт «ломается» при масштабировании 125% и 150% — объясняем языком дизайнера

1. Что такое масштабирование 125% и 150% в Windows и почему это важно

Если ты открывал макет сайта на своём ноутбуке, а потом — тот же сайт в браузере и ловил себя на мысли: «Почему всё выглядит больше/иначе?», — знай, ты не один. Причина в системном масштабировании, которое сегодня используют большинство современных устройств.

Представь обычный ноутбук на Windows с экраном 15.6″ и разрешением Full HD (1920×1080). Из-за высокой плотности пикселей (PPI) элементы интерфейса выглядят очень мелкими. Чтобы сделать их читаемыми, система автоматически применяет масштабирование 125% или 150%.

И это не просто «увеличение», как при зуме, — это пересчёт размеров всех элементов, включая шрифты, кнопки и отступы. При этом разрешение остаётся 1920px, и именно поэтому дизайнеры часто попадают в ловушку: то, что выглядит идеально в Figma, в реальности может выходить за пределы экрана или казаться гигантским.

2. Как масштабирование влияет на реальное отображение сайта

Итак, у нас ноутбук с Full HD (1920×1080) и масштабированием 125%. Казалось бы, всё должно выглядеть привычно. Но в реальности пользователь видит меньший viewport — не 1920 пикселей, как в макете, а около 1536 px.

То есть сайт, который ты спроектировал на ширину 1920px, уже не помещается в окно просмотра без горизонтального скролла или «сжатия». И именно поэтому:

• Контент выглядит больше, чем задумано.
• Сетка «ломается» или становится слишком плотной.
• Медиа-запросы в CSS срабатывают не так, как ты ожидал.

Почему так происходит?
Браузер не «видит» системное масштабирование как изменение разрешения — он рендерит сайт с учётом физического viewport. И этот viewport уже меньше, чем ты ожидал, потому что система увеличила интерфейс для пользователя.

Это как будто ты смотришь через окно, которое кто-то сузил: ты всё ещё рисуешь пейзаж на большом холсте, но видишь только его часть.

3. Почему классический подход «макет на 1920px» больше не работает

Раньше всё было просто: дизайнер открывал Figma, ставил артборд на 1920px ширины и спокойно строил дизайн под десктоп. Но времена изменились — и сегодня 1920 пикселей в макете не гарантируют, что пользователь увидит сайт именно так.

Вот почему это уже не работает:

• Системное масштабирование (125–150%) уменьшает фактический viewport. Например, при масштабе 150% Full HD превращается в 1280px ширины. И твой «идеальный» сайт на 1920px просто не помещается.
• Пользователи редко смотрят сайт в полноэкранном режиме. В браузере часто открыты вкладки, панель закладок, а кто-то ещё работает с двумя окнами одновременно. То есть даже на мониторе 1920px сайт может отображаться в 1600px или даже 1400px.
• Современные экраны = разные DPI и форматы. У одного 24-дюймовый Full HD, у другого — 13-дюймовый 4K. И всё это меняет восприятие масштаба интерфейса.

Что с этим делать?

• Отказываться от фиксированного подхода «десктоп = 1920».
• Переходить на адаптивный подход с гибкими сетками и использованием vw — об этом и поговорим в следующем блоке.

4. Решение: переход к адаптивности через vw

Когда мы говорим об адаптивном дизайне, большинство сразу представляет медиа-запросы (@media) и десятки брейкпоинтов. Но есть более гибкое решение — использование vw (viewport width).

Что такое vw?

• 1vw = 1% ширины видимого окна браузера (viewport).
• То есть, если ширина окна 1280px, то 1vw = 12.8px.
• И независимо от разрешения или системного масштабирования — vw всегда реагирует на фактическую ширину, которую видит пользователь.

Преимущества vw для дизайна:

• Реальная адаптивность — элементы меняются вместе с окном браузера.
• Меньше зависимости от «1920» — ты проектируешь под реальную ширину, а не воображаемую.
• Лучшее отображение при масштабировании 125–150%, потому что всё подстраивается автоматически.
• Меньше медиа-запросов, потому что всё масштабируется плавно.

Типичные примеры использования:

Контейнер:

css.container {
  width: 90vw;
  max-width: 1280px;
  margin: 0 auto;
}

Типографика:

css{
  font-size: calc(1.2rem + 1.5vw);
}

Или ещё круче — с clamp():

css{
  font-size: clamp(1.5rem, 2vw, 3rem);
}

Это позволяет задать границы, чтобы шрифт не становился слишком маленьким или слишком большим.

Для Figma тоже работает!

Ты можешь мыслить «процентами» или создавать компоненты с Auto Layout и адаптивной шириной. В сочетании с Live Preview или плагинами для просмотра на разных экранах это даёт отличный результат.

5. Как правильно строить макеты, чтобы не попасть в ловушку масштабирования

Когда ты уже понимаешь, что 1920px — это не абсолют, а лишь одна из многих условностей, пора переходить к практике. И вот несколько советов, как строить макеты, которые будут хорошо выглядеть при любом масштабе и на любом экране.

1. Работай в масштабе 100% в Figma

• Используй Ctrl+1 / Cmd+1, чтобы увидеть реальный размер элементов (actual size).
• Если увеличишь или уменьшишь масштаб — получишь искажённое представление о пропорциях.

2. Создавай макеты с учётом viewport, а не «виртуальных» пикселей

• Рабочая ширина артбордов:
  • 1440px — удобна для большинства десктопов
  • 1280px — хороший реальный viewport при масштабировании 125–150%
  • 768px — для планшетов
  • 375px — для мобильных

Необязательно начинать с 1920px. Реальность пользователя — меньше.

3. Используй auto layout и процентные значения

• Приучай себя не «забивать» фиксированные ширины вроде 1200px, а использовать гибкие компоненты.
• Figma поддерживает “Fill container”, “Hug contents” — это как раз про адаптивность.

4. Тестируй в браузере:

• Chrome DevTools → “Toggle device toolbar” → выставляй разные размеры окна.
• Там же можно видеть viewport width в реальном времени.
• Установи расширение вроде Window Resizer — и сможешь быстро переключаться между ширинами окна.

5. Идеально — проверка на реальном Full HD экране

• Если есть возможность — подключи к ноутбуку внешний монитор 1920×1080 без масштабирования.
• Или открывай сайт в окне фиксированной ширины, чтобы видеть, как это будет выглядеть у пользователя.

Всё это не про «подогнать», а про мыслить шире: ты создаёшь интерфейс, который должен работать везде. И твоё оружие — не пиксели, а логика поведения.

6. Примеры использования vw в CSS

Окей, теория — это отлично. Но давай покажу, как это выглядит в коде, чтобы ты сразу мог применять это в своих проектах или передать разработчикам.

Контейнер с vw и max-width

css.container {
  width: 90vw;             /* занимает 90% ширины viewport */
  max-width: 1280px;       /* но не больше определённого предела */
  margin: 0 auto;          /* выравнивание по центру */
  padding: 0 20px;         /* небольшой внутренний отступ */
}

Этот подход позволяет блоку адаптироваться к экрану, но не становиться слишком широким на больших мониторах.

Адаптивная типографика с calc()

css{
  font-size: calc(1.2rem + 1.5vw); /* растёт вместе с экраном */
  line-height: 1.2;
}

Идеально для заголовков — они всегда выглядят пропорционально.

Или с clamp() — ещё гибче

css{
  font-size: clamp(1.5rem, 2vw, 3rem);
}

• 1.5rem — минимальный размер на маленьких экранах.
• 2vw — динамическая часть.
• 3rem — ограничение, чтобы размер не стал слишком большим.

Это современный и очень стабильный способ сделать шрифты «живыми».

Кнопка, которая адаптируется к ширине:

css{
  padding: 0.6em 2vw;
  font-size: clamp(14px, 1.2vw, 18px);
}

Горизонтальный отступ секции

css{
  padding-left: 5vw;
  padding-right: 5vw;
}

Никаких «container-fluid», просто: «оставляй пространство по краям всегда, независимо от ширины».

И немного магии для background:

css.hero {
  background-size: 100vw auto;
}

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

7. Выводы для дизайнеров и разработчиков

Масштабирование 125%, 150% или даже 175% — это не исключение, а норма для современных пользователей. И если раньше эти нюансы можно было игнорировать, то сейчас игнорирование реального viewport — это потеря качества дизайна.

Итак, что важно помнить:

Фиксированная ширина 1920px больше не гарантирует реалистичное отображение.

• Viewport width (vw) — твоё новое «универсальное полотно», которое учитывает всё: размер окна, DPI, масштабирование.
• Figma, CSS, браузеры — у всех есть инструменты, чтобы правильно тестировать и адаптировать дизайн. Главное — знать как.

Мысли не пикселями, а логикой адаптации.

Интерфейс должен не просто «влезать» в экран — он должен работать на любом экране: хорошо выглядеть, быть удобным, не ломаться и не вызывать вопросов вроде: «А почему у меня сайт не помещается?».

И именно для этого существует правильная комбинация:

• гибкая сетка
• vw
• clamp()
• и любовь к пользователю — потому что дизайн не про пиксели, а про опыт.

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

Вы тоже только что пробормотали «чёрт»? Тогда самое время доверить адаптивность тем, кто дружит с vw и магией CSS.