Как сделать самый простой адаптивный сайт
С 21 апреля 2015 года поисковая система Google, а со 2 февраля 2016 года Яндекс, внесли изменения в своих правилах по выдачи страниц на поисковый запрос интернет-пользователю.
Теперь тем, кто пользуется интернетом с мобильных устройств, на верхние позиции поисковика в первую очередь будут показывать адаптивные сайты, то есть те сайты, которые будет наиболее удобно просматривать на мобильных устройствах.
В связи с нововведением в правилах поисковых систем, для лучшей ревалентности ресурса в сети, теперь сайт должен поддерживать адаптивный дизайн. Немного придется переделать сайт и все:)
Чтобы разобраться как устроен адаптивный сайт, создадим самый простой шаблон из которого и сделаем адаптивный:
<style> body p, br, h1, h2, h3, h4, h5, h6 #wrapper < background: #ccc; width: 100%; max-width: 1000px; margin: 0 auto; margin-top:5px; height: auto !important; >
#header #header h1
#content #colRight
#content #colLeft
#footer </style>
#wrapper - каркас сайта, то что объединяет весь шаблон его закрывающий тег находится перед закрывающимся </body>.
#header - шапка сайта, ее можно поставить как перед wrapper так и после.
#header h1 - логотип.
#content - служит в качестве блочного элемента, объединяет colLeft и colRight.
#colRight - сайдбар.
#colLeft - место под контент.
#footer - подвал сайта.
Все эти элементы, header, colLeft, colRight, footer должны быть независимы друг от друга. Их можно как в игре "Пятнашки", передвигать и менять местами. А зависеть все это будет от того, с какого мобильного устройства будет осуществляться просмотр сайта (размер его табло). Я не имею виду именно данный шаблон, он самый простой и здесь много не подвигаешь. Другие адаптивные шаблоны у которых имеются дополнительные колонки одна или две, добавочное горизонтальное меню и т.д., но об этом позже.
Вот что получилось, вид на мониторе персонального компьютера:
При уменьшении размера экрана, сайт начинает сжиматься и текст становится мелким и трудно читаемым.
Мета-тег viewportЧто бы текст при маленьких экранах остался при своих размерах, между тегами <head></head> нужно добавить мета-тег viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
текст станет хорошо читаемым, но тогда появится горизонтальная полоса прокрутки, так как два блока не умещаются в горизонтали на табло.
А это и не красиво и не удобно пользователю!
Адаптивный дизайн сайта media screen
Для нормального отображения сайта на мобилах с разным расширением используют медиа-запросы media screen. Немного выше, я говорил про игру в "Пятнашки". Так вот при помощи media screen и создается адаптивный дизайн под любой экран мобильного устройства. Элементы сайта можно менять местами слева-направо сверху-вниз, где то увеличить или уменьшить. Для каждого мобильного устройства можно делать свой адаптивный дизайн сайта.
На нашем примере не правильно расположен сайтбар, с помощью media screen опустим его под контент. Сделаем это не только для данного расширения, но и для мобильных устройств с расширением от 240px по 375px включительно. То есть на телефоне с разрешением экрана больше 375px сайтбар опускаться уже не будет.
@media screen and (min-width:240px) and (max-width:375px)#footer
@media screen and (min-width:240px) and (max-width:375px)