Как прописать значения для .container,чтобы все правильно отображалось на больших экранах тоже?

Question

[Nik_1011]

Здравствуйте. Смотрю на макеты в figma, где-то ширина области 1920,где-то 1440,где-то 1320.
Как нужно прописывать значения правильно? Ну например,макет на 1320, мне что,брать это значение и допустим прописывать с максимального разрешения:

.page__container{
  max-width: calc(1320px - (40px * 2));
  margin-left: auto;
  margin-right: auto;
 padding: 0 40px;
}

Дальше в breakpoints уменьшать padding.
Ну а как это будет отображаться на Full HD или 4K?
Просто хочу узнать как верно сделать.

Comments

[Ankhena]

Ну а как это будет отображаться на Full HD или 4K?

Самое разумное спросить у дизайнера или заказчика.
Часто просто текстовый вопрос не приносит результата, поэтому имеет смысл показать пару картинок.

Просто хочу узнать как верно сделать.

Универсального ответа не существует.
Какие-то дизайны рассчитаны, чтобы растянуться/масштабироваться/адаптироваться на 8к, а каким-то это противопоказано.

max-width: calc(1320px - (40px * 2));

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

Answer 1

[ForSureN1]

По сути это ошибка(?) дизайнера, что они рисуют на макете 1440px, т.к. так показывают в курсах, от сюда 2 варианта, делать по их размерам, либо же делать адаптив в 2 стороны, и для full HD и для мобилок, но это полный бред, займет куда больше времени чем в одну сторону адаптив. Если мне прилетает такой макет, то я делаю точно так же, как на нем, а если они начинают говорить что почему такое маленькое все, или большое на их мониторах, то объясняю что они сами скинули такой макет

Answer 2

[Edward Gricc]

да человек с верху прав и я тоже делаю примерно так а точнее следующим образом: делаю по фактическом макету однако все элементы по возможности длеаю резиновыми чтоб лни спокойно увеличивались но не уменьшались а при работе уже с меньшими разрешегиями делаю адаптив по ситуации, не знаю на сколько ясно я выразился но если ты меня понял то обдкмай такой вариант и попробуй хотябы один метод такой реализации и будут тебе выводы)