Как правильно верстать макет, чтобы сайт хорошо отображался на всех ширинах ДО основной ширины макета?

Question

[Joe Brock]

Т. е., я имею ввиду, вот есть у psd макета ширина 1600px, и как мне сверстать, чтобы сайт отображался нормально на всех разрешениях 1600+ (1700, 1920, 2500px и т. д.)?
Или же так верстать не нужно, и это нормально то что если я верстаю под одну ширину, то на всех ширинах до основной "макетной" все слетает?

Comments

[Alams Stoyne]

Всё зависит от макета, нужно понять "резиновый" или "фиксированный" и от этого верстать

Answer 1

[ma4t]

По хорошему, к примеру, надо пилить макеты 375, 768, 1024, 1440. Потом все что идет больше 1440 сохраняет вид макета 1440. Но все зависит от заказчика и решений дизайнера.

Т.е. здесь Вы ограничиваете div c max-width: 1600px и здесь уже по макету margin по бокам и пр. , ну или не див, а прям в body пишите max-width: 1600px. Смотрите по верстке, как удобно вам.

Answer 2

[ReActor Дмитрий Вершанский]

Приветствую!

Накопление, стилизация и позиционирование элементов при вёрстки, должно происходить таким образом, при котором, визуальный результат одинаково логичен и порядочен в большом диапазоне разрешений ( от 320px до 4096px ). Этот интервал захватывает весь перечень различных устройств, предназначенных, в том числе для просмотра интернет-страниц. Не нужно забывать о SmartTV, иными словами 4K-панелями, с которых сёрфингом по интернету занимаются так же часто , как это происходило исключительно со стационарных ПК, в свое время...

Для вёрстки должным образом, используйте медиа-запросы, в совокупности с сеткой (bootstrap, grid).

Comments

[Joe Brock]

Спасибо за ответ! Не совсем вас понимаю: мне нужно писать медиа-запросы от 4096px до 320px? Или в сочетании с сеткой это несложно? Лично мне нравится использовать флексбокс, а обычно флексы не смешивают с гридами или бутстрапом.

[ReActor Дмитрий Вершанский]

Joe Brock, разумеется, Вы, прежде всего, исходите из рамок, поставленных в Технических требованиях (если таковые вообще имеете перед глазами и очередной ленивый предприниматель, не проявил себя, в духе - "Емеля с той печи...")

На практике, лично я, использую подход, при котором перекрываю большой диапазон устройств. Зная тот факт, что совсем скоро затачивать и под 8k, и под 16k, 32k...неизбежно придётся.

Миксовать grid с flexbox или нет - это дело личных предпочтений)

[ReActor Дмитрий Вершанский]

Joe Brock, сами посудите и поставьте себя на место владельца собственного ресурса, который "кормит" или намерен кормить вашу семью. Будете ли вы согласны с тем, что открыв сайт на сверхразрешениях у себя дома, или, скажем, демонстрируя его своим гостям в прекрасной обстановке на дорогом телевизоре, вы увидите, что вёрстка "съехала". Какими словами и аргументами, при таком раскладе, вы оправдываете действия и результат работы специалиста, которому вы лично платили денежные средства?)

[Joe Brock]

Re{Actor}, полностью согласен, верстка должна хорошо смотреться на всех устройствах, просто мне кажется легче сделать ее либо резиновой, либо ограничить в ширине (max-width), как написали в первом ответе. Или же просто прописать в боди width: 100% - если костылей нет, все будет смотреться нормально при любом разрешении. А писать медиа-запросы на 4к пикселей - это странно, мне так кажется. Может, я не прав. Просто, их же обычно пишут для адаптивности начиная с ширины самого макета до 320 пикселей

[ReActor Дмитрий Вершанский]

Joe Brock, Вы не совсем поняли меня с технической стороны. Как раз-таки я ограничиваю ширину оберточного внешнего контент-контейнера сайта на отметке 4096px. Но где и как именно впечатывать медиа-запросы, крайне зависит от конкретной работы и совокупности элементов в ней...

[ReActor Дмитрий Вершанский]

Joe Brock, откройте текущий сайт или ВКонтакте и много еще кандидатов впридачу. Хотя бы на 1920px и посмотрите как это стремно выглядит (личное мнение). Все равно, что сайты - аля 90-ые. Тут даже речь не идёт о сверхразрешениях.