Почему сайт выглядит иначе, чем в Figma, при 100% зуме?

Вы столкнулись с типичной ситуацией: сайт, свёрстанный по макету Figma, при 100% масштабе в браузере кажется слишком крупным, а блоки не помещаются в контейнер. При уменьшении масштаба до 75-80% всё становится как в дизайне. Разберёмся в причинах.

Основная причина: разница в разрешении экрана и масштабировании Figma

Figma отображает макеты с учётом вашего системного масштаба и разрешения экрана. Если у вас монитор Full HD (1920×1080), но в системе или браузере установлен масштаб 100%, то браузер использует реальные пиксели. Однако Figma может показывать дизайн так, будто экран имеет другое разрешение (например, 125% или 150% системного масштаба). Это приводит к несоответствию.

• В Figma (Preview): макет подстраивается под размеры окна, поэтому 1640px контейнер и 391px блоки выглядят гармонично.
• В браузере (100% зум): размеры рассчитываются строго по CSS-пикселям. Если ваш монитор Full HD, а системный масштаб 100%, то 1640px контейнер занимает почти всю ширину, а 4 блока по 391px + отступы (3×25px = 75px) требуют суммарно 1639px. Теоретически они помещаются, но на практике могут вылезать из-за округления, границ или других CSS-свойств.

В чём ошибка: дизайнер или код?

Проблема чаще всего кроется в недостаточной адаптивности макета со стороны дизайнера. Если Figma-макет создан для экрана с определённым масштабом (например, 125%), то на стандартном Full HD без зума он будет выглядеть крупнее. В вашем случае:

• Дизайнер не учёл разницу между физическим и CSS-разрешением при стандартном масштабе браузера.
• В коде всё верно для указанных размеров, но макет не оптимизирован под реальные условия просмотра.

Рекомендации:

• Уточните у дизайнера, под какое разрешение и системный масштаб он создавал макет (обычно 1920×1080 при 100% или 1440×900 при 125%).
• Используйте относительные единицы (%, vw, rem) и медиазапросы для адаптивности.
• Добавьте box-sizing: border-box для блоков, чтобы паддинги и границы не увеличивали ширину.
• Проверьте, не установлен ли в браузере зум по умолчанию (например, 110% в настройках).

Практический пример с вашим кодом

Ваш код рабочий, но при 100% зуме на Full HD 4 блока по 391px + 3 отступа по 25px = 1639px. Контейнер 1640px - идеально. Однако если ваш браузер имеет скрытый зум (например, из-за системных настроек), блоки могут не влезть. Попробуйте:

• Обнулить зум в браузере (Ctrl+0).
• Проверить настройки масштаба в ОС (Windows: Параметры → Экран → Масштаб 100%).
• Изменить ширину контейнера на max-width: 100% или использовать calc() для гибкости.

Если после этого проблема сохраняется - виноват дизайнер, который не учёл стандартное отображение. Требуйте макет под 1920×1080 с учётом 100% масштаба.