С помощью чего делать адаптивный дизайн?

Question

[Worddoc]

Здравствуйте. Изучаю верстку и стал задумываться, какой идеальный способ адаптивной верстки?
1)Media queries(вручную). Часто можно соблюдать параметры блоков по-пиксельно, что обеспечивает точную копию макета. Но так ли это эффективно, писать все параметры для каждого разрешения вручную?
2)Фреймворки. Изучил Bootstrap, сверстал уже 1 сайт адаптивно(inter-space.ru). Здесь же придется мириться со стандартными размерами колонок, что не дает соблюдать пропорции дизайна. Конечно можно разбивать колонки на колонки, но всё это дело выравнивать пока хорошо не умею.
3)Flex box. Не верстал еще флекс боксами, но вижу огромные плюсы в использовании данных фичей. Можно легко верстать адаптивно. размещать блоки в ряд как захочется многое другое. Но,насколько я знаю, не все браузеры поддерживают данную технологию, что делает флекс боксы сырым, но перспективным решением.

Всё таки,господа, хотелось бы узнать ваше мнение и получить совет, в какую сторону лучше двигаться, чтобы делать адаптивный дизайн быстро и с максимальным КПД.

Answer 1

[Сергей Горячев]

Бутстрап - это извращение, которое придумали программисты, не умеющие верстать :)))
Единственное применение этому Фреймворку - верстка админок и интерфейсов.
Если нужен фронтэнд, то верстайте ручками, качественно и надежно.

Comments

[Worddoc]

Что можете сказать о флекс боксах?

[Сергей Горячев]

Worddoc: Ничего не буду говорить, так как это не кроссбраузерно.
Я очень редко использую их, чтобы клиенты не жаловались, что у них на компе что-то не так.
Через годик посмотрю поддержку браузерами и статистику. Пока не советую лично.

[Сергей delphinpro]

Worddoc: caniuse.com/#search=flexbox

[copal]

Все дело в том, что верстку придумали программисты не знающие школьную математику и сделали вместо математической плоскости, оригами.
минусы bootstap3 в не настраиваемых сетках и сложности изменения дизайна (как собственно и у любого другого). Так же его использование означает, что все красивые имена уже заданны. Его огромные плюсы в его поддержке, много тем и если Вы сверстали на нем, то это означает что любой другой с легкостью сможет его изменить.

[Андрей Федоров]

Worddoc: Но это же очевидно!!! Придумали заменитель table для div, так как все решили что div - это круто. ))) :P

Answer 2

[Dark Hole]

А чем вам чистый CSS не угодил?
Практически ЛЮБУЮ страницу можно сверстать адаптивно. Правда, для того, что бы был полностью адаптивным(т.е. адаптировался и у клиента, и при добавлении содержимого) нужно попотеть. Однако это вполне реально.

Answer 3

[Дмитрий Христоев]

все просто - макет под бутстрап, верстать под бутстрап. макет не под бутстрап - верстать вручную

Answer 4

[zooks]

Sass + Susy + Flex

Answer 5

[verbaux]

Как-то вы все в кучу смешали.

Фреймворки используют те же mq для адаптивного дизайна, и не нужно их считать способом верстки. Думаю, если у вас возникает подобный вопрос, то вам даже вредно лезть в фреймворки, сначала научитесь справляться без них, а то видел пару раз на собеседованиях людей, которые на вопрос «А зачем у вас в каждом блоке вот это» отвечают «Не знаю, но в бутстрап так было».

Флексбоксы совсем не сырое решение, если не путаю, уже вышла финальная спецификация, да и поддержка у него достаточная — (canius показывает 95%). В старых браузерах ее (из коробки) не будет никогда, однако это не повод считать флексбоксы сырыми.

К тому же, адаптивно можно верстать и с помощью display-inline. float (да просто возьмите блок и он сам будет сжиматься вслед за окном браузера, если не определить ему ширину :) ), все зависит от того, что именно вы хотите сделать.

Единственного решения нет, где-то будет удобнее флексбоксами сделать, где-то хватит флоатов.

И только без MQ, пожалуй, не обойтись :)

Answer 6

[Михаил Семин]

Сам работаю с адаптацией сайтов. Медиа запросы + небольшие изменения самих стилей к блокам. Особо сложного нет, а подключаться всякие фреймворки для адаптации — как по мне, вовсе не нужно.

Или, вариант универсальные — сразу же верстать адаптивный шаблон, установка максимальной ширины и др.