Макет шириной 2667px — как верстать(верстка на flexbox)?

Question

[Ramzzza]

Скажите, какую базовую ширину задавать для контейнера, и как вообще подготовить такой макет к верстке?

Comments

[Виталий Першин]

А в чем конкретно проблема?

[Ramzzza]

Виталий, в том, что по идее обычно пляшут от ширины 1170 px для контейнера, а потом уже адаптируют под другие размеры

[Виталий Першин]

Ramzzza, от 1170px пляшут адепты бустрапа и прочих фреймверков и то в том случае, когда не умеют сами настраивать размеры сетки. А вы должны плясать от тз. Опять же что это за макет в 2667px, если рабочая область таких мониторов 2560px. Рабочая область занимает все 2667px или это все включая фон? Было бы не плохо показать макет и сказать в чем именно сложность, потому что размер, как говориться значения не имеет.

[Ramzzza]

Виталий, bit.ly/2HncKQh
макет
это размер целиком, получается контейнер на 2560 и поехали?

[Виталий Першин]

Ramzzza, У вас ширина рабочей области всего 1660px +- пару пикселей смотря какие отступы применять. Все остальное просто фон. Как именно верстать зависит от вашей техники и применяемой методологии, но я бы каждую секцию обернул в блок который тянется на 100% экрана(в красных рамках на скрине), и внутри бы уже сделал блок контента с max-width: 1660px; (в зеленых рамках на скрине)

Внешний блок можно использовать для декорирования фона, в данном случае это белая навигация с тенью и подвал. Ну внутренней управляете как хотите. Собственно такой способ позволит вам даже в центре сделать блок на 2560px при желании. А ширина вашего сайта в итоге то классическая 1920px, просто макет растянули, не более.

[Ramzzza]

Виталий, спасибо, что решили со мной повозиться, буду дома, попробую сделать по вашему совету)

[Ramzzza]

Виталий, еще один вопрос по теме: не подскажете, есть какой-то стандарт для того, чтобы глядя на макет, выставлять ширину контейнера? Как вы определили, что нужно делать контейнер 1660px?
frontender.com.ua/media-queries
вот тут нашел какие то стандарты для определения широты экрана, но там нет 1660 px

[Виталий Першин]

Ramzzza, Сейчас у большинства широкоформатные мониторы размером 1920px и все что помещается в эти 1920px может быть рабочей областью. Стандарты определенные есть, они основаны на размерах часто используемых устройств, но это адаптивная верстка, а лучшая верстка отзывчивая, та верстка которая при любом размере имеет стабильный вид, это симбиоз адаптивной и резиновой верстки поэтому вас вообще не должна беспокоить ширина макета.

Узнал я очень просто, открыл фотошоп и обвел рабочую область:

[Ramzzza]

Виталий, а нормально будет, если я задам ширину дял контейнера 1640px, там же еще по 10px отступы в рабочей области?

[Виталий Першин]

Ramzzza, Смотря какой подход вы используете

[Ramzzza]

Виталий, получается для таких блоков нужно отдельно указывать ширину контейнера?

[Виталий Першин]

Ramzzza, Для каких таких? Это абсолютной классическое расположение блоков. У вас ширина от начала блока до конца 1630px без учета отступа. А дальше вы сами смотрите какие отступы применять будете внутренние, внешние, на каких блоках и принимайте решение окончательной ширины контейнера