С помощью чего вы делаете Adaptive?

Question

[mashacppjun]

Начинающий Front end разработчик. Хотел бы уточнить, в правильном ли направлении я иду к адаптиву, изучая Flexbox + media queries? Не лучше ли взять готовую бутстрап сетку? Перешли ли вы на Flexbox?
В этом примере сетка перестраивается при уменьшении размера экрана без медиазапросов, что если я буду ожидать одно поведение при уменьшении, а будет совсем другое? Как работать с флексбокс так, чтобы он перестраивал сетку так, как это нужно мне? Поделитесь опытом, будьте так добры)
codepen.io/dudleystorey/pen/eAqzk?editors=110

Answer 1

[Капитан Какао]

Ни когда не использовал эти бутсрепы, и использовать не буду. Ерунда полная.
Лучше делать всё самому. При вёрстке адаптивных макетов всегда пользуюсь media queries и вам советую.
По поводу flex, я делаю сетку таким образом: jsfiddle.net/0et4kh52
Сожмите окно с результатом, и увидите как 3 колоночная сетка перестроилась в 2 колоночную.
Всё элементарно ;)

Comments

[mashacppjun]

Благодарю =)

[Капитан Какао]

mashacppjun: ;)

Answer 2

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

Использую немножко подпиленную под себя сетку от Bootstrap (4 Alfa).
+ конечно же стили отдельных блоков по необходимости модифицирую через media queries

Пожалуйста, не говорите так как будто bootstrap и media queries это какие-то альтернативные подходы. Бутстрап это просто набор стилей, с теми же медиа запросами.

Я поначалу тоже плевался - зачем бутстрап и т.д. Я и сейчас считаю великой глупостью в любой проект тащит бутстрап и потом спрашивать на тостере как переопределить его стили. Но когда наработал свой мини-фреймворк для сетки - сетка бутстрапа и получилась.

Flex box - круто все, но когда стоит задача поддерживать старые ослы (8+) то профита с генерацией фоллбеков не вижу.

И, конечно, если дизайнер совсем ублюдок, то никакая сетка не поможет)

Comments

[Никита Мусихин]

"Я поначалу тоже плевался - зачем бутстрап и т.д." - жиза прежиза,тоже не доверял пока не попробовал,друзья сказали заюзай один раз на проекте,ничего не будет, а теперь каждый раз в деле.

Answer 3

[Дмитрий Новиков]

Бутстрап для больших проектов и модульного подхода, media queries для маленьких сайтов и особо сложных случаев. Такой подход обеспечивает максимальную кроссбраузерность.