Как правильно настроить Bootstrap?

Question

[Anna Kolchina]

Есть макет шириной: 2000px и шириной контейнера 1476px.

Вопросы:
1) Что прописывать в @container-large-desktop? 1970 + @grid-gutter-width или 1446 + @grid-gutter-width.
2) Какое значение выставлять в @screen-lg?
3) А также как быть с вёрсткой при разрешение экрана от @screen-md до @screen-lg? Так как если кастомизировать @screen-lg, а @screen-md не изменять, то получится ширина макета будет 940px до тех пор пока экран не достигнет @screen-lg.

Answer 1

[lukoie]

1 уточните у дизайнера как должен себя вести сайт на больших экранах(зафиксируйте этот ответ письменно в тз)
3) адаптив + респонсив. верстка не только "прыгает", но и "тянется" между контрольными точками

Comments

[Anna Kolchina]

Спасибо за ответ, но макет был скачан с интернета, с целью создания портфолио, так что уточнять не у кого.

[lukoie]

Anna Kolchina, тогда это Вам решать как будет себя вести ширина. Я бы второе ставил.

[Anna Kolchina]

lukoie, А как правильно обозначить контрольные точки, возможно, есть какие-то стандарты? Ведь не может сайт тянутся от 940 до 1970.

[lukoie]

Anna Kolchina,
https://getbootstrap.com/docs/3.3/css/

Зурбовый Фундамент базовые контрольные точки считает так:
https://foundation.zurb.com/sites/docs/media-queri...
small: 0px,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
(хоть это сасс и пиксели, но наглядно видно что он в итоге переведёт в эмки в стиле)

вот смотрите как человек переопределяет контрольные точки для мобайл-фёрста:
https://scotch.io/tutorials/default-sizes-for-twit...

фондейшн и бутстрап это стандарты, так что если говорить о стандартах, то ориентируйтесь на них.

[Anna Kolchina]

lukoie, Спасибо, но с этими точками всё понятно, они действительно являются стандартами, но какие точки определять после 1440, если ширина макета >= 1920? Определять на своё усмотрение? 1563, 1756 и пр.?

[lukoie]

Anna Kolchina,
я не встречал чтобы между 1440 и 1920 ставили свои контрольные точки, по своему выбору. разве только 1600 или 1650.
если бы я искал какие минорные точки ставить, я бы глянул статистику, какие разрешения чаще всего проскакивают в статистике.
например вот тут: gs.statcounter.com/screen-resolution-stats
тут: https://www.w3schools.com/browsers/browsers_resolu...
и тут: https://www.w3schools.com/browsers/browsers_display.asp

гляньте вот этот гист:
https://gist.github.com/Mikodes/be9b9ce42e46c3d4ccb6
тут есть 1536-2048, 1600+ и 1680+
но вообще, желательно понимать цели, и работать под целевые разрешения.
вот статья на цсс-триксах про высокие разрешения:
https://css-tricks.com/optimizing-large-scale-displays/
у них для xxlarge стоит 2560px (160em), и 2560 они определяют как максимум на сегодня.

вот интересная тема форума фондейшна, где говорят как в фондейшн5 контрольные точки апдейтнули по сравнению с 4:
https://foundation.zurb.com/forum/posts/187-which-...
$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); / 641px, 1024px /
$large-range: (64.063em, 90em); / 1025px, 1440px /
$xlarge-range: (90.063em, 120em); / 1441px, 1920px /
$xxlarge-range: (120.063em); / 1921px */

[Anna Kolchina]

lukoie, Спасибо, много полезного.