2

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

2

2 ответа 2

6

Способ реализации принципа 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> и не скачает ненужные стили.

2

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.