Может кто немного яснее объяснить суть mobile first верстки?
Вот у меня есть огромный проект сейчас, который в большей степени будут использовать с мобильных телефонов (там будет еще PWA, так что в качестве приложений в том числе)
Обычно я верстал стандартно, просто менял отображение-показ элементов на разных разрешениях начиная от десктопной версии и ниже.
Теперь пытаюсь вкурить, как нужно верстать при mobile first? Мне нужно верстать сначала мобилку и потом по мере увеличение экрана показывать элементы?
Звучит как-то жестко.
Можете подсказать и разъяснить это?
да, именно так и есть, так же, как на десктоп, только наоборот, медиа запросы делаются по мере увеличения разрешения, а не уменьшения, так же считаю что это жесть, и тех, кто так верстает неадекватами
Да, в реальной жизни часто выглядит так: пришел макет от дезигнера для мобильных, а ты уже изобретаешь что сделать с этим всем великолепием, чтоб можно было на десктопах видеть красоту
На деле не плохая практика, просто надо перевернуть для тебя привычный взгляд ;)
берёшь два макета мобильник\десктоп (по хорошему)
делаешь разметку всех элементов с двух макетов
переключаешься на мобильный вид и начинаешь рутину со стилями до десктоп варианта элементы, которые только на десктопе - прячешь, остальные элементы по мере доступной области растягиваешь. По итогу на мобильники приходиться меньше стилевых правил и меньше пользователей, которые не могут открыть по 100500 вкладок, потому что всё тормозит
Включаю в браузере эмулятор мобайла - и всю верстку веду в нем. Затем растягиваю до планшета - раскидываю элементы по местам, растягиваю до десктопа - повторить п.2.
Поначалу дико, но потом понимаешь, что костылей при таком подходе нужно гораздо меньше и код получается более лаконичным.
Простой
