Насколько такой подход правильный?

Question

[theWaR_13]

Доброго времени суток. Недавно начал учиться верстать с использованием сеток, аналогичных бутстраповской и вот пришло время попробовать сделать первый адаптивный сайт. Верстал mobile first, но как только дело дошло до следующих разрешений экрана, я начинаю видеть, что код становится сильно запутан. Это нормально или все таки существуют другие подходы к такой верстке? Правильно-ли иметь целый отдельный row для каждого типа девайса? И нормальна-ли такая нагроможденность кода в .scss файлах? Спасибо.

Вот кусок кода: codepen.io/anon/pen/mVqJBQ

P.S. Скорее всего вы скажете, что стоит использовать меньше классов в html и использовать миксины. Я переделал бутстраповскую сетку (использовал flexbox и пару своих фишек, до миксинов еще не дошел, это, естественно, исправлю позже).

UPD. В примере, который я оставил, класс row используется для перехода на новую строку. В мобильной версии макета есть два блока, которые находятся друг под другом. В планшетной версии нижний блок переползает на одну строку с верхним. Как можно это реализовать используя только 1 row?

Answer 1

[Алексей Струков]

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

Comments

[theWaR_13]

Спасибо за ответ. А что скажете насчет css?

[Алексей Струков]

theWaR_13: принцип в кратце таков:
Есть например блок, которому мы хотим например присваивать разную ширину, в зависимости от устройства. Пишем медиазапросы с указанием ширины устройства и внутри них прописываем классы.
Например:
media (max-width: 450px) { .phone { width: 100%; } }
media (max-width: 750px) { .pad { width: 50%; } }

Теперь нашему блоку надо присвоить оба этих класса. Это все немного упрощенно но суть в целом должга быть понятна. Главное помещать медиазапросы в конце css, чтобы при эти классы применялись последними к блоку и переписывали другие значения, которые могут быть к нему применены.

[theWaR_13]

Алексей Струков: вроде понятно. Я обновил содержание вопроса про переход на новую строку. Как бы вы посоветовали решить эту проблему?

[Алексей Струков]

theWaR_13: это делается с помощью float: left; проблема в том что я лишь поверхностно знаком с бутстрапом и мои рекомендации могут расходиться с их методологией построения макета и количества оберток для блоков. Я бы рекомендовал вообще не работать с фреймворками, по крайней мере до тех пор пока не изучите css, чтобы понимать как он работает. Сетку построить очень легко самому - это буквально 100 строк кода, а то и меньше. В данном случае надо сделать ширину у каждого блока равной 100 процентам для телефонов, что сделает их на разных строках. В медиазапросе для планшета делаем им ширину 50 процентов и они встают на одну строку.

[theWaR_13]

Алексей Струков: ну с бутстрапом я по сути и не работаю, просто позаимствовал их сетку, немного изменил ее и пытаюсь ее применять. Впрочем сейчас я вроде бы начинаю понимать, как должно быть на самом деле :)

[Алексей Струков]

theWaR_13: это лучше подробней почиатат в интернете про принцип сетки и адаптивность. Я описал это в кратце без нюансов

Answer 2

[winbackgo]

Такой подход в корне не правилен. Верстка должна быть общей для всех девайсов, а приводить ее в соответствующий вид для тех или иных разрешений нужно через css и media-query. Чем меньше html разметки, тем лучше.