В процессе вёрстки важно понимать, как макет из Figma (или другого редактора) соотносится с тем, что ты видишь в браузере. Особенно, если ты работаешь на ноутбуке с небольшим экраном и невысоким разрешением — например, 1366×768.
Если тебе казалось, что достаточно выставить масштаб 100% в Figma и браузере, и всё будет пиксель-в-пиксель, — эта статья тебя удивит.
🧠 CSS-пиксели ≠ физические пиксели
Дизайнеры чаще всего делают макеты под разрешение 1920×1080 и выше. А теперь вопрос: если у твоего экрана всего 1366×768 физических пикселей, как он может показать такой макет?
Вот что происходит:
В Figma:
- Figma показывает макет в логических пикселях — они не зависят от разрешения твоего экрана.
- Если фрейм 1920px шириной — он не влезет на экран с шириной 1366px. Figma уменьшит изображение, чтобы оно уместилось.
- Даже при масштабе 100% (1x) — это не настоящий 1:1. Просто логические пиксели отображаются один к одному, но физически они сжаты.
В браузере:
- Браузер работает по тем же принципам. Если сайт шириной 1920px — он либо сожмётся, либо появится горизонтальный скролл.
- На экране 1366px ты не увидишь реальный размер, даже если масштаб 100%.
⚙️ Физическое разрешение ≠ установленное в настройках
Многие считают, что если в настройках системы стоит разрешение 1920×1080 — значит, экран его реально отображает. Это ошибка.
✅ Физическое (нативное) разрешение — это количество настоящих пикселей, встроенных в матрицу экрана.
⚠️ Программное (выставленное) разрешение — это то, что "рисует" видеокарта, а не то, что может показать экран.
Что происходит, если выставить 1920×1080 на экране 1366×768?
- Видеокарта будет пытаться отрисовать интерфейс как будто в FullHD.
- Но экран не может физически показать 1920×1080 — у него нет столько пикселей.
- В итоге включается масштабирование (интерполяция):
всё изображение сжимается, теряя чёткость;
текст становится размытым;
искажены пропорции;
при этом ты не получаешь реального 1:1.
Это особенно критично для вёрстки, где каждый пиксель имеет значение.
📌 Если экран физически 1366×768 — никакое "виртуальное FullHD" не сделает из него FullHD. Только внешний монитор.
🧪 Простой тест
Хочешь убедиться?
- Открой в Figma фрейм 1920×1080.
- Поставь масштаб 1x (100%).
- Если ты не видишь весь фрейм полностью, значит, Figma уменьшила отображение, чтобы он влез.
- Это значит, что твой экран не передаёт макет в 1:1.
- То же самое произойдёт и в браузере.
✅ Что делать, если ты работаешь на ноутбуке
1. Используй внешний монитор
Лучшее решение — подключить внешний FullHD или 2K монитор.
Почему большой монитор — реальное преимущество:
- 📏 Макет отображается пиксель-в-пиксель — без искажений, как задумано.
- 🔍 Мелкие элементы видны чётко — не нужно увеличивать масштаб.
- 🧠 Меньше зрительной и ментальной нагрузки — ты сразу видишь реальную картину.
- 🛠️ Можно держать рядом Figma, код и браузер — экономия времени и концентрации.
- 💡 Итоговая вёрстка точнее и качественнее, потому что ты работаешь с "честной" картинкой.
🧾 Даже простой внешний монитор 1920×1080 за 8–10 тыс. рублей может сильно повысить твою эффективность и точность.
2. Эмулируй FullHD в браузере
Если внешнего монитора нет — можно использовать DevTools:
- Открой DevTools (F12) → нажми Ctrl+Shift+M (режим адаптивного устройства).
- Введи размеры: 1920×1080.
- Установи масштаб 100%.
Так ты увидишь, как сайт будет выглядеть на FullHD-мониторе.
Но есть нюанс:
⚠️ На экране 1366×768 такой предпросмотр будет нечитабельно мелким.
Кнопки, текст и элементы будут в 1.5–2 раза меньше, чем должны.
Работать в таком виде невозможно — только проверять верстку, но не делать её.
3. Не верь глазам — верь цифрам
Если ты не можешь отобразить макет 1:1 — ориентируйся на точные значения, а не визуально:
- 📐 Если в Figma элемент 960px шириной — задать в CSS 960px, и проверить линейкой в DevTools.
- ↔️ Если отступ 40px — замерь линейкой, а не "на глаз".
- 🧩 Используй DevTools для точной вёрстки: инспектор, box model, rulers.
⚠️ Вёрстка "на глаз" с ноутбука — это ловушка
На экране 1366×768 ты не видишь то же самое, что увидит пользователь с FullHD. Всё будет сжато и уплотнено, и ты можешь подумать, что "всё идеально", хотя это не так.
А потом открываешь на большом экране — и видишь:
- отступы неправильные,
- текст крупнее, чем ты думал,
- элементы "поехали".
📌 Вывод
Вёрстка — это точная работа. И если ты хочешь делать пиксель-перфект, нужен не только скилл, но и правильный инструмент.
Если у тебя ноутбук с 1366×768:
- Не ориентируйся на визуальное совпадение.
- Работай по цифрам и отступам.
- Эмулируй FullHD, но понимай ограничения.
- Лучше всего — подключи внешний монитор.
- Не путай "виртуальное разрешение" с физическим.
👁️ Экран — это твой главный рабочий инструмент. Чем он точнее, тем лучше результат.
💬 А ты сталкивался с такими проблемами? Как решаешь вопрос вёрстки на небольшом экране? Поделись в комментариях — будет полезно коллегам!