Верстка мобильной версии сайта | WAVIFUN.RU

Верстка мобильной версии сайта

верстка мобильной версии сайта

На сегодняшний день человечество не представляет себе жизнь без мобильных телефонов. Современные технологии позволяют обладателям смартфонов выходить в интернет, путешествовать по сайтам, редактировать документы и многое другое.

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

Итак, рассмотрим процесс верстки мобильной версии сайта. Верстка мобильной версии сайта продумывается еще на этапе создания макета сайта. Необходимо продумать внешний вид мобильной версии сайта. А лучше всего нарисовать ее и в нескольких вариантах с разной шириной, например с шириной на 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;
	}
}

Вот небольшой пример того, что нужно делать при верстке мобильной версии сайта.

 

30.03.2017
462
0
0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии

Так вы сможете получать новые статьи первыми

Pin It on Pinterest