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

Добрый день, у меня задача нарисовать адаптивную версию дизайна сайта под 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 макета?
  • Вопрос задан
  • 3059 просмотров
Решения вопроса 1
1. Колонки не должны быть разной ширины, они задаются в %. По сути просто указывается сколько колонок занимает блок (обычно n из 12), Ширина блока 100% / 12 * n.
Соответственно по пикселям мерить ваш макет верстальщику не потребуется.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы