ogarich89
@ogarich89
Front-End Developer

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

Ребята, давно уже верстаю адаптивные сайты и тут задался вопросом.
Я пользуюсь таким подходом.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">


Сначала верстаю статичную страничку в style.css, потом подгоняю под все гаджеты с помощью media запросов в responsive.css и так каждую страничку.

Насколько этот подход правильный и есть ли более универсальные методы создания адаптивного сайта?
  • Вопрос задан
  • 1695 просмотров
Решения вопроса 2
@metaf
У вас получается desctop-first подход, намучаетесь потом перекрывать всякие десктопные стили на мобилках.
Наиболее удобно и читабельно организованный код - когда всё в одном файле, а media описаны внутри класса
.class {
  //general & mobile styles
  color: red;
  @media (min-width: 600px) {
    //tablet & above styles
    color: green;
  }
  @media (min-width: 1200px) {
    //desktop styles
    color: black;
  }
}
Ответ написан
serjikz
@serjikz
web-developer
Ну делать адаптив вам так никто не мешает и тут ничего такого вы особа и не описали. Есть 2 способа верстать адаптивно - сначала мобильную версию и из неё переходить в десктоп, либо обратно. Только так.

На счет того, как организовать процесс - изучите БЭМ для этого дела. С ним хорошо верстать. Если ещё пользоваться препроцессорами какими-то - шикарно, а ещё если и сборщиками - вообще идеально (ну less/sass/postcss можно по-разному компилить вплоть до плагинов в редакторе).

Как делаю я:
1. Клепаю html полностью, естественно именую классы по БЭМ (можно посекционно делать - сделал секцию шапки, запилил стили, сделал секцию подвала и опять же запилил стили, кому как удобно)
2. Создаю на каждый (ну или почти на каждый) БЭМ-блок свой .less файл.
3. В каждом файле верстаю сначала моб версию, потом в нём же чуть по-ниже пишу нужные media
4. Конечно же сборщиком всё собираю в 1 css файл и всё (сборщик работает, конечно, постоянно, чтоб компилировать из less в css ну и минимизировать сразу и автопрефиксить).

Этап 3 можно делать подругому, к примеру делать отдельно media.block.less под каждый блок и всё это загонять в самый низ сжатого css, либо весь media делать в отдельном файле просто, всё зависит от того, на сколько много вам нужно писать media (у меня бывают простые проекты, где media нужно буквально 2-3 штуки в 50-70 строк кода максимум, для этого не вижу смысла всё в отдельные файлы блоков писать, пихаю просто всё в один).

P.S. Конечно же отдельные файлы less для миксинов и переменных ну и основных стилей страницы.

P.P.S Если вы не знаете препроцессоров - можно всё тоже самое делать и в обычном css, всё равно будет удобно. Раньше я считал дикостью такой подход. Сейчас без него жить не могу.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
sakrab
@sakrab
Не будь побежден злом, но побеждай зло добром...
Я так и пользуюсь.

По балуйся с bootstrap. Может легче станет. Сам я не фанат bootstrap.
Ответ написан
Комментировать
@chanton91
В работе использую sass, стили каждого блока выношу в отдельный файл, где сначала описывается основные стили блока, а ниже media queries. Как писали выше, удобней в одном месте смотреть и редактировать поведение блока.

Касаемо процесса верстки, у всех он разный, некоторые накидывают html на всю страницу, а потом занимаются чисто css для него. Я практикую такой подход, верстаю от блока к блоку. Например начинаю с шапки, накидал html и сразу же все css и media для нее, протестировал везде, проверил, все шик, перешел к следующему блоку. С таким подходом, вам не мешают другие не отстиленные блоки, вы работаете только с одной частью страницы и концентрируетесь только для работы с ней. В добавок вы сразу протестили на всех разрешениях и больше к этому блоку не возвращаетесь.
Ответ написан
Комментировать
dom1n1k
@dom1n1k
Можно и так, конечно.
Но лично я предпочитаю, чтобы стили, относящиеся к одной сущности, были вместе. Чтобы можно было посмотреть и сразу понять как она себя ведет.
А не смотреть и думать - хм, а интересно, что ещё для этого блока может быть прописано в других файлах? И прописано ли? А если да, что что и где?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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