Верстка мобильной версии сайта
На сегодняшний день человечество не представляет себе жизнь без мобильных телефонов. Современные технологии позволяют обладателям смартфонов выходить в интернет, путешествовать по сайтам, редактировать документы и многое другое.
К современным сайтам стали предъявляться требования адаптации сайтов к мобильным устройствам. Перед веб-разработчиками стоит вопрос: как сделать мобильную версию сайта? В этой статье мы разберем основы верстки мобильной версии сайта. Многие, уважающие себя интернет ресурсы, создают мобильные версии сайта на отдельных поддоменах, но мы сейчас не будем говорить о многомегабайтовых ресурсах, а поговорим об обычных сайтах: интернет магазинах, блогах, сайтах-визитках и т.д.
Итак, рассмотрим процесс верстки мобильной версии сайта. Верстка мобильной версии сайта продумывается еще на этапе создания макета сайта. Необходимо продумать внешний вид мобильной версии сайта. А лучше всего нарисовать ее и в нескольких вариантах с разной шириной, например с шириной на 1024 пикселей и 768 пикселей. Таким образом, вы получите примерную картину того, как будет выглядеть мобильная версия.
Далее вам нужно определиться стоит ли вам создавать заново сайт, адаптированный под мобильные устройства и планшеты с адресом типа: mobile.yoursite.ru или же ваш сайт с доменном yoursite.ru будет адаптироваться под разрешение экрана устройства.
Еще раз повторюсь, что мы говорим не о мощнейших интернет ресурсах с большим количеством сервисов, а о простых сайтах. Для простых сайтов я бы рекомендовал писать код в том же файле стилей, который находится в вашем шаблоне, ну или просто создать отдельный файл стилей и подгрузить его.
Верстка мобильной версии сайта
Теперь перейдём непосредственно к коду, который будет отвечать за адаптацию страниц сайта. Вы должны четко понимать, что верстка мобильной версии сайта это процесс упрощения уже существующего сайта. Поэтому нам необходимо упростить стили, которые применяются к сайту, учитывая ширину экрана.
Как сделать так, чтобы страница учитывала ширину экрана, нам нужно записать следующий код:
@media screen and (max-width: 732px) {
....
}
Цифра показывает нам минимальную ширину или равную данному значению. Для разной ширины вы указываете разное значение и изменяете стили. Например,
@media screen and (max-width: 732px) {
#menu {
display: none;
}
#menu_mobile {
display: block;
}
span.cont {
color:#383838;
font-size: 20px;
}
}
@media screen and (max-width: 1024px) {
#menu {
display: block;
}
#menu_mobile {
display: none;
}
span.cont {
color:#383838;
font-size: 14px;
}
}
Далее мы рассмотрим создание меню, которое адаптируется в зависимости от разрешения экрана. Сначала нам нужно написать меню на html. Должен сказать, что мы продублируем меню с небольшим изменением. Одно меню для полного экрана, другое для мобильных устройств.
Для полного экрана
<div id="menu"> <ul> <li><a class="link_menu" href="/">Главная</a></li> <li><a class="link_menu" href="#">Тарифы</a></li> <li><a class="link_menu" href="#">Контакты</a></li> <li><a class="my_profile" href="#">Личный кабинет</a></li> </ul> </div>
Для мобильных устройств
<div id="menu_mobile">
<ul>
<li id="bars"><a class="bars" href="#"><i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<li><a class="link_menu" href="/">Главная</a></li>
<li><a class="link_menu" href="#">Тарифы</a></li>
<li><a class="link_menu" href="#">Контакты</a></li>
<li><a class="link_menu" href="#">Личный кабинет</a></li>
</ul>
</li>
</ul>
</div>
Обратите внимание на выделенные строки. Мы задали им разные идентификаторы. Далее нам надо оба меню обернуть в один общий класс. Выглядит это так:
<div class="menu">
<div id="menu">
<ul>
<li><a class="link_menu" href="/">Главная</a></li>
<li><a class="link_menu" href="#">Тарифы</a></li>
<li><a class="link_menu" href="#">Контакты</a></li>
<li><a class="my_profile" href="#">Личный кабинет</a></li>
</ul>
</div>
<div id="menu_mobile">
<ul>
<li id="bars"><a class="bars" href="#"><i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<li><a class="link_menu" href="/">Главная</a></li>
<li><a class="link_menu" href="#">Тарифы</a></li>
<li><a class="link_menu" href="#">Контакты</a></li>
<li><a class="link_menu" href="#">Личный кабинет</a></li>
</ul>
</li>
</ul>
</div>
</div>
Далее работаем со стилями. Мы не будем рассматривать стилизацию общего вида меню, а рассмотрим главные моменты, на которые следует обратить внимание. Первым делом нам нужно спрятать (скрыть) меню с идентификатором menu_mobile. Делаем это так:
#menu_mobile {
display: none;
}
Затем, чтобы отображалось адаптированное меню при изменении разрешения экрана, нужно сделать так, чтобы основное меню скрывалось, а мобильное (адаптированное меню) появлялось.
@media screen and (max-width: 897px) {
#menu_mobile {
display: block;
}
#menu {
display: none;
}
}
Вот небольшой пример того, что нужно делать при верстке мобильной версии сайта.