логотип
Антивирусная безопасность

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

С 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

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



Вирусы на ПК
Самые простые и эффективные способы удаления.

Персональный компьютер
Безопасность очистка ускорение системы.

Вирус и его цель
Вид обнаружение и быстрое удаление вируса.

Вирус в телефоне
Защита от вирусов очистка ускорение.

Kaspersky на помощь
Компьютерная антивирусная помощь.

Dr.Web метод лечения
Только Dr.Web антивирусы сканеры лечащие утилиты.

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

Для телефона
Бесплатные антивирусные программы на смартфон.

Для флешки
Как обезопасить свой компьютер от вирусов с флешки

Создание и продвижение
Как создать свой сайт и продвигать его в поисковых системах.

Установить на сайт
Доработка сайта с полезными предложениями. .