Как правильно определить ширину контейнера и брейкпоинты при верстке?

Question

[Егор Бабинцев]

Есть два макета. Один с шириной контейнера 1300px, другой 360px. Но как определить какие должны быть промежуточные размеры контейнеров и их поведение, какие должны быть брейкпоинты (обычно использую стандартные бутстраповские 1200px, 992px и т.д.)? Заранее спасибо за ответ и потраченное время!

Comments

[Rustam Bainazarov]

Дизайнер это должен решать, а не вы.

Answer 1

[Мария Коробкоголовых]

Вот неплохая статья про брейкпоинты. Оттуда же сразу демка на кодпене.

А на счет ширины контейнера -- это должен был дизайнер решать. Можно ширину в процентах задать и он будет резиновый. Не видя макета сложно что-то конкретное посоветовать

Answer 2

[Антон Кирпач]

Использую 320,360,375,480,640,768,800,980,1024,1200,1280px - клиенты обычно остаются довольны

Comments

[Никита Кит]

11? Да ты парниша усидчивый.
У меня за всю историю разработки самый адаптивный дизайн макетами был описан максимум в 6 брейкпоинтов. 11 уже как-то параноидально

[Антон Кирпач]

Никита Кит, это обсуждается заранее и заказчики обычно готовы за 11 брейкпоинтов платить.

[Никита Кит]

Антон Кирпач, впервые слышу чтоб это решал верстала а не дизайнер.
Что-то тут не так -_-

[Антон Кирпач]

Никита Кит, у нас дизайнер ничего не решает как ему скажешь так он и будет делать)

[Никита Кит]

Антон Кирпач, ну это печально. Прототипирование интерфейса под пользовательский опыт - задача дизайнера. Задача разработчика - предоставить гибкость изменений кодовой базы интерфейса. Разработка должна, наоборот, развязывать дизайнеру руки для реализации любых идей. Много брейков это плохо. А приведённые тобой - излишнее переполнение кодовой базы и что самое забавное - ни один из приведённых тобой брейков не предусматривает mobile landscape. Про ширину помнят все, а вот про то, что у viewport ещё и высота есть - не помнит почти никто.
Это терпимо только в типовых проектах. В нетривиальном сервисе с подобным подходом далеко не уйдёшь

[Антон Кирпач]

Никита Кит, итог моей работы - программисты, сеошники а самое главное заказчик доволен. pagespeed по итогу больше 80(desktop и mobile) общими усилиями. Что еще нужно для счастья? Косяки в проектах есть у всех!