Как подобрать сетку и брекпойннты под bootstrap 3 и 4?

Question

[NotLogo]

Добрый день, у меня задача нарисовать адаптивную версию дизайна сайта под Twitter Bootstrap 3 или возможно 4 версии. Сложность в том, что в отличии от моего предыдущего опыта, верстальщики с которыми нужно будет взаимодействовать не работали с фрейморком и нужно будет их консультировать.

К примеру обычно рисовал макеты под стандартную сетку по шаблону Bootstrap psd grid

• Grid template 320px container 30px gutter 53-54px
  
• Grid template 480px container 30px gutter 80px col
  
• Grid template 750px container 30px gutter 62-63px
  
• Grid template 970px container 30px gutter 80-81px
  

Вопросы:

• Как объяснить почему колонки сетки, которую я привел выше, разной ширины?
  
• Есть ли смысл рисовать под 970 px если текущий дизайн уже сверстанный под десктоп нормально отображаются на 1024 px?
  
• Что даст макет на 480 px, когда макет на 320 px и после верстки так будет масштабироваться на 480?
  
• В Bootstrap 4 брекпойнты по умолчанию в em (landscape phones - 34em. tablets- 48em) как в px рассчитать ширину и сетку psd макета?
  

Comments

[Максим Тимофеев]

не трогайте bootstrap4 он еще даже не в бета. Он сырой и не рабочий. Зачем? Рано.

[NotLogo]

Максим Тимофеев: Какие проблемы могут быть при его использовании, с чем вы сталкивались?

[Максим Тимофеев]

NotLogo: C bootstrap4? Основная проблема что он меняется каждый день, и доки соответсвенно и так будет до момента релиза. Чем вас 3-й не устраивает?

Answer 1

[Андрей Хохлов]

1. Колонки не должны быть разной ширины, они задаются в %. По сути просто указывается сколько колонок занимает блок (обычно n из 12), Ширина блока 100% / 12 * n.
Соответственно по пикселям мерить ваш макет верстальщику не потребуется.

2. Очень сильно зависит от того насколько там все нормально свёрстано.

3. Имхо бесполезный брекпоинт, в 95% случаев пустая трата времени. 320+, 768+ и 1024+ вполне достаточно.

4. Брекпоинты в пикселях вернули.

Answer 2

[Сергей Завьялов]

А разве в bootstrap 4 есть размер 1024? Знаю, что есть размер 1170 после размера 970. Не знаю, может быть, сейчас появилась сетка больше 1170, хотя не уверен: читабельность будет низкая.