Реализация Mobile First

204

12 апреля 2017, 12:14

Всем привет. Ребят, подскажите способы реализации Mobile First принципа верстки. Делать два разных файла CSS для маленьких экранов и для больших? Или писать все в одном, а затем с помощью медиа запросов изменять контент? Может есть примеры кода у кого-нибудь? Спасибо.

Answer 1

Способ реализации принципа mobile first лежит в самом названии — при создании фронтенда вы в первую очередь реализуете мобильное отображение и функциональность.

Проще всего это объяснить на примере верстки какого-нибудь простого блока, скажем, шапки сайта. Предположим, что в дизайне для мобильных в шапке нет фоновой картинки, название сайта небольшого размера и кнопка, при нажатии на которую открывается меню. Так ваши основные стили будут содержать описание именно этого отображения:

document.querySelector('.menu__toggler').addEventListener('click', function() { 
  document.querySelector('.menu__list').classList.toggle('menu__list--shown'); 
});

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.pageheader { 
  border: 1px solid #000; 
  padding: 15px 20px; 
  background-color: #fff; 
} 
 
.sitename { 
  margin: 0; 
  font-size: 22px; 
} 
 
.menu__toggler { 
  position: absolute; 
  font-size: 0; 
  width: 40px; 
  height: 40px; 
  border-radius: 50px; 
  background-color: #000; 
  border: none; 
  top: 10px; 
  right: 10px; 
} 
 
.menu__list { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  display: none; 
  position: absolute; 
  border: 1px solid #000; 
  border-bottom: none; 
  right: 60px; 
  top: 10px; 
} 
 
.menu__list--shown { 
  display: block; 
} 
 
.menu__link { 
  display: block; 
  padding: 5px 10px; 
  border-bottom: 1px solid #000; 
  background-color: #fff; 
}

<header class="pageheader"> 
  <h1 class="sitename">My site name</h1> 
  <nav role="navigation" class="menu"> 
    <button class="menu__toggler">Menu toggler</button> 
    <ul class="menu__list"> 
      <li class="menu__item"><a href="#" class="menu__link">Main page</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">About us</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">Sources</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">Links</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">Contacts</a></li> 
    </ul> 
  </nav> 
</header>

И дальше, когда вы будете стилизовать эту разметку под десктопные разрешения, вы будете прописывать остальные стили уже через медиа-выражения:

document.querySelector('.menu__toggler').addEventListener('click', function() { 
  document.querySelector('.menu__list').classList.toggle('menu__list--shown'); 
});

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.pageheader { 
  border: 1px solid #000; 
  padding: 15px 20px; 
  background-color: #fff; 
} 
 
.sitename { 
  margin: 0; 
  font-size: 22px; 
} 
 
.menu__toggler { 
  position: absolute; 
  font-size: 0; 
  width: 40px; 
  height: 40px; 
  border-radius: 50px; 
  background-color: #000; 
  border: none; 
  top: 10px; 
  right: 10px; 
} 
 
.menu__list { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  display: none; 
  position: absolute; 
  border: 1px solid #000; 
  border-bottom: none; 
  right: 60px; 
  top: 10px; 
} 
 
.menu__list--shown { 
  display: block; 
} 
 
.menu__link { 
  display: block; 
  padding: 5px 10px; 
  border-bottom: 1px solid #000; 
  background-color: #fff; 
} 
 
@media (min-width: 700px) { 
  .pageheader { 
    padding-bottom: 0; 
    background-image: url(https://sftextures.com/texture/5545/0/2716/css-background-image-pattern-grey-light-white-color-diagonal-line-rough-wall-seamless-texture.jpg); 
  } 
  .sitename { 
    font-size: 32px; 
  } 
  .menu__toggler { 
    display: none 
  } 
  .menu { 
    margin: 20px -20px 0; 
  } 
  .menu__list { 
    display: flex; 
    position: relative; 
    top: 0; 
    right: 0; 
    border: none; 
    border-top: 1px solid #000; 
  } 
  .menu__item { 
    flex-grow: 1; 
  } 
  .menu__item+.menu__item { 
    border-left: 1px solid #000; 
  } 
  .menu__link { 
    border-bottom: none; 
  } 
}

<header class="pageheader"> 
  <h1 class="sitename">My site name</h1> 
  <nav role="navigation" class="menu"> 
    <button class="menu__toggler">Menu toggler</button> 
    <ul class="menu__list"> 
      <li class="menu__item"><a href="#" class="menu__link">Main page</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">About us</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">Sources</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">Links</a></li> 
      <li class="menu__item"><a href="#" class="menu__link">Contacts</a></li> 
    </ul> 
  </nav> 
</header>

Что касается разделения стилей на несколько файлов, то в этом, на мой взгляд, есть смысл, поскольку для пользователей мобильных устройств будет прирост в скорости: браузер будет скачивать гораздо меньше стилей, меньше потратит времени на разбор этих стилей, на построение CSSOM и, как следствие, быстрее отрисует страницу. Делается это таким образом:

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="desktop.css" media="(min-width: 700px)">

Таким образом, во время разбора HTML, мобильный браузер увидит медиа-выражение в элементе <link> и не скачает ненужные стили.

Answer 2

Главное в Mobile First - не забывать о смысле самого термина: Сперва Мобильные. На практике часто получается, что сперва верстают БОЛЬШОЙ сайт для БОЛЬШИХ экранов, а потом адаптируют его для мобильных - это нарушение принципа Mobile First.

Отвечая на вопрос: Удобнее работать в одном CSS файле, но это не принципиально (хотя на каждый лишний файл делается лишний запрос, зачем плодить лишнее?).

Дополняя вопрос: также стоит задумываться о том, как будет выглядеть сайт при разрешении экрана по горизонтали 2560px и более. Величина определенных элементов (например, шрифтов) должна пропорционально изменяться и в этом случае.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблемы с обновлением на localhost

В общем, с недавних пор перестал корректно работать browsersyncв чем суть: есть openserver, на нем хост с проектом на gulp, запускаю зеркальный хост через...

282

HTML

Как выбрать данные из JSON средствами angular.js

Добрый день всемЕсть код, который выводит данные из jsonовского файла на страницу

217

HTML

Резиновый input на остаток строки

Как сделать, чтобы input занимал весь остаток строки сразу за label?

183

HTML

адаптация рулетки js

248