Всем привет. Ребят, подскажите способы реализации Mobile First принципа верстки. Делать два разных файла CSS для маленьких экранов и для больших? Или писать все в одном, а затем с помощью медиа запросов изменять контент? Может есть примеры кода у кого-нибудь? Спасибо.
2 ответа
Способ реализации принципа 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>
и не скачает ненужные стили.
Главное в Mobile First - не забывать о смысле самого термина: Сперва Мобильные. На практике часто получается, что сперва верстают БОЛЬШОЙ сайт для БОЛЬШИХ экранов, а потом адаптируют его для мобильных - это нарушение принципа Mobile First.
Отвечая на вопрос: Удобнее работать в одном CSS файле, но это не принципиально (хотя на каждый лишний файл делается лишний запрос, зачем плодить лишнее?).
Дополняя вопрос: также стоит задумываться о том, как будет выглядеть сайт при разрешении экрана по горизонтали 2560px и более. Величина определенных элементов (например, шрифтов) должна пропорционально изменяться и в этом случае.