Почему размеры в фигме и размеры на сайте — отличаются на деле?
Верстаю сайт по фигме, расставляю все размеры как указаны там, в итоге, при 100% зуме в браузере - сайт становится как будто под версию для слепых, но в фигме же - все нормально, даже если открыть через Preview. Но если сделать зум 75-80%, то все становится так как нужно.
К примеру - контейнер 1640px, и 4 блока(как слайдер) по 391px ширины и высоты и отступами между собой в 25px.
Вот пример, тут допустим у меня на 100% зуме - у меня даже блоки не помещаются, а на 75-80% - всё как нужно и всё как нарисовано в фигме
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <style> .container { max-width: 1640px; margin: 0 auto; } .block-list { display: flex; gap: 25px; flex-wrap: wrap; } .block { width: 391px; height: 391px; background-color: black; } </style> <div class="container"> <div class="block-list"> <div class="block"> 123 </div> <div class="block"> 123 </div> <div class="block"> 123 </div> <div class="block"> 123 </div> </div> </div> </body> </html> |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <style> .container { max-width: 1640px; margin: 0 auto; } .block-list { display: flex; gap: 25px; flex-wrap: wrap; } .block { width: 391px; height: 391px; background-color: black; } </style> <div class="container"> <div class="block-list"> <div class="block"> 123 </div> <div class="block"> 123 </div> <div class="block"> 123 </div> <div class="block"> 123 </div> </div> </div> </body> </html>
Моник у меня full hd
Это проблема дизайнера или всё же в коде что-то требовалось указать, в общем - просьба пояснить почему так происходит.
Дополнительно:
зум в фигме скорее всего не 100%
ну или приколы мониторов с плотностью больше стандартной для css, где в одном дюйме строго 96 пикселей
Какое масштабирование установлено в системе?
Можно проверить тут: https://www.esolutions.se/en/test
Скорее всего, в системе в настройке масштабирования стоит не 100% (особенно это вероятно, если речь о ноутбуке).
Дизайнер нарисовал какую-то конкретную ширину (он же не может нарисовать все). На этой ширине вьюпорта всё должно выглядеть как в макете.
А дальше перестраиваете, чтобы на любой ширине хорошо выглядело.
Если самому никак, консультируйтесь с дизайнером.
Ответы:
Привет,почему у тебя стоит селектор в Body?Я только начинаю изучать фронтенд,поэтому спрашиваю.Вдруг я что-то не так понял.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, довольно распространенная и может иметь несколько причин. Одной из основных причин, по которой размеры в макете в Figma могут отличаться от размеров на сайте, является неправильное использование единиц измерения.
В Figma, как правило, используются пиксели (px) для измерения размеров элементов. Однако на сайте, особенно при адаптивной верстке, размеры часто указываются в относительных единицах, таких как проценты (%) или вьюпорты (vw, vh). Поэтому, если вы просто скопируете размер элемента из Figma и установите его на сайте в пикселях, это может привести к расхождению размеров.
Другой причиной может быть неправильное использование отступов, границ и других CSS свойств, которые могут влиять на окончательный размер элемента на сайте. Например, если у элемента есть граница или внутренний отступ, это также может изменить его окончательные размеры.
Чтобы решить эту проблему, рекомендуется следующее:
1. Проверьте, какие единицы измерения используются в Figma и преобразуйте их в соответствующие относительные единицы для сайта.
2. Убедитесь, что вы правильно настроили отступы, границы и другие свойства CSS элементов.
3. Проверьте, как элементы масштабируются на различных устройствах, чтобы убедиться, что размеры выглядят корректно на всех экранах.
Приведу пример использования размеров в PHP:
$width = "50%"; $height = "auto"; echo "<div style='width: $width;height: $height'>Содержимое блока</div>";
Следуя этим рекомендациям, вы сможете минимизировать расхождение размеров между макетом в Figma и вашим сайтом.