Логотип
Вам в помощь
Как сделать самый простой адаптивный сайт

Как сделать самый простой адаптивный сайт

С 21 апреля 2015 года поисковая система Google, а со 2 февраля 2016 года Яндекс, внесли изменения в своих правилах по выдачи страниц на поисковый запрос интернет-пользователю.

Теперь тем, кто пользуется интернетом с мобильных устройств, на верхние позиции поисковика в первую очередь будут показывать адаптивные сайты, то есть те сайты, которые будет наиболее удобно просматривать на мобильных устройствах.

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

Чтобы разобраться как устроен адаптивный сайт, создадим самый простой шаблон из которого и сделаем адаптивный:

#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">

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Адаптивный дизайн</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

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

Демо

как сделать самый простой адаптивный сайт

А это и не красиво и не удобно пользователю!

Адаптивный дизайн сайта

Для нормального отображения сайта на мобилах с разным расширением используют медиа-запросы media screen. Немного выше, я говорил про игру в "Пятнашки". Так вот при помощи media screen и создается адаптивный дизайн под любой экран мобильного устройства. Элементы сайта можно менять местами слева-направо сверху-вниз, где то увеличить или уменьшить. Для каждого мобильного устройства можно делать свой адаптивный дизайн сайта.

На нашем примере не правильно расположен сайтбар, с помощью media screen опустим его под контент. Сделаем это не только для данного расширения, но и для мобильных устройств с расширением от 240px до 480px. То есть на телефоне с разрешением экрана больше 480px сайтбар опускаться уже не будет.

@media screen and (min-width:240px) and (max-width:480px)

#footer {
background: #F0DA0E;
width: 100%;
max-width: 1000px;
height: 90px;
margin: 0 auto;
clear: both;
}


@media screen and (min-width:240px) and (max-width:480px) {

#header {
font-size: 0.7em;
}
#wrapper #colLeft {
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}

}

В данном медиа-запросе прописаны правила для мобильных устройств с экраном не более 480px

#header - в шапке сайта уменьшил размер логотипа, так как при маленьком расширении может не помещаться.

#wrapper #colLeft - отменил выравнивание по левому краю float:none, сделал ширину контента в полный экран width:100%, и сайдбар опустился под контент.

#wrapper #colRight - сделал отступ сайдбара от контента margin-top:25px, width:100% ширину сайтбара в полный экран.

Вот что получилось:

Демо

как сделать самый простой адаптивный сайт

@media screen and (min-width:481px) and (max-width:800px)

@media screen and (min-width:240px) and (max-width:480px) {

#header {
font-size: 0.7em;
}
#wrapper #colLeft {
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}

@media screen and (min-width:481px) and (max-width:800px) {

#wrapper #colLeft {
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}

Демо

И наконец, чтобы адаптивный сайт якобы не растягивался на экранах разрешением свыше 1000px, многие добавляют медиа-запрос с уменьшением ширины (ниже). Ненужно это делать, в каркасе шаблона стоит max-width:1000px; и шире этого параметра он не станет.

@media screen and (min-width:1024px) and (max-width:1400px) {
#wrapper {
width: 90%;
margin: 0 auto;
}
#wrapper #content #colLeft {
width:75%;
}
#wrapper #content #colRight {
width:25%;
}
}

Протестировать свой адаптивный сайт, посмотреть как выглядит он на разных мобильных устройствах с разными экранами, очень удобно на deviceponsive.com

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



Самые простые и эффективные способы удаления
Вирусы на компьютере
Самые простые, эффективные способы удаления
Безопасность очистка ускорение системы
ПК
Безопасность очистка ускорение системы
Защита от вирусов очистка ускорение
Вирусы на телефоне
Защита от вирусов очистка ускорение
Вид обнаружение и быстрое удаление вируса
Вирус и его цель
Вид обнаружение и быстрое удаление вируса
Антивирусы сканеры лечащие утилиты
Dr.Web, Kaspersky
Антивирусы сканеры лечащие утилиты
Антивирусные программы  ведущих разработчиков
Для компьютера
Антивирусные программы ведущих разработчиков
Бесплатные антивирусные программы на смартфон
Для телефона
Бесплатные антивирусные программы на смартфон
Как обезопасить свой компьютер от вирусов с флешки
Для флешки
Как обезопасить свой компьютер от вирусов с флешки
Как сделать сайт, продвижение в поисковых системах
Как сделать сайт
Продвижение сайта в поисковых системах
Доработка сайта полезными предложениями
Установить на сайт
Доработка полезными предложениями
Простые решения в тупиковых ситуациях
Простые решения
в тупиковых ситуациях