Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Perexod-k-adaptivnoj-vyorstke

Переход к адаптивной вёрстке.

Что же это такое — адаптивная вёрстка? В век высоких технологий трудно себе представить современного человека без мобильного телефона. А насколько популярны стали планшеты, электронные книжки. Сейчас всё больше и больше людей используют услуги мобильного интернета. И вебмастерам приходится с этим считаться. С этим пришлось столкнуться и мне. Скажу, что для моего сайта количество посетителей с мобильных устройств составляет в среднем 5-15% от общего числа.

адаптивная верстка сайтаБлагодаря адаптивной вёрстке сайта все посетители могут нормально просматривать записи, странички, искать нужную им информацию, комментировать и т.п. Конечно, 5-10% не такое большое количество от 100 человек в сутки, но представьте если будет 1000 человек, а 10000? То это уже существенно. Итак, попробуем обобщить всё то, что я написал и дать небольшое определение:


Адаптивная верстка сайта — это способность сайта (HTML документа) по-разному отображаться и быть оптимизированным под различные устройства. Если коротко, то это адаптация сайта под различные устройства.


Так как же сверстать страницу под мобильные устройства? Я выделяю два способа:

Мы с вами рассмотрим оба способа. Для начала давайте рассмотрим с вами небольшой пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Описание странички</title>
<style>
body {
font: 90% Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
margin: 0; /* Отступы на странице */
}
h1 {
font-size: 2em; /* Размер шрифта */
margin: 0; /* Убираем отступы */
color: #ffc; /* Цвет текста */
}
h2 {
font-size: 1.8em; /* Размер шрифта */ 
margin-top: 0; /* Убираем отступ сверху */
}
header { /* Верхний блок */
max-width:100%;
min-width:320px;
background: #20867B; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
nav { /* Левая колонка */
float: left; /* Обтекание справа */
border: 1px solid #ccc; /* Параметры рамки вокруг */
width: 30%; /* Ширина колонки */
padding: 5px; /* Поля вокруг текста */
margin: 10px; /* Значения отступов */
}
ul li { 
min-width:70%;
list-style-type:none; /* убираем маркер */ 
margin:auto;
}
article { /* Правая колонка */
width:55%; /* ширина элемента */
margin: 10px 0 10px 38%; /* Значения отступов */
padding: 5px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
footer { /* Нижний блок */
max-width:100%; /* максимальная ширина элемента */
min-width:320px; /* минимальная ширина элемента */
background: #999; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
clear: left; /* Отменяем действие float */
}
</style>
</head>
<body>
<header><h1>Название сайта</h1></header>
<nav>
   <ul>
      <li><a href="#">Пункт №1</a></li>
      <li><a href="#">Пункт №2</a></li>
      <li><a href="#">Пункт №3</a></li>
      <li><a href="#">Пункт №4</a></li>
    </ul>
</nav>
<article>
    <h2>Заголовок текста </h2>
           <p>Здесь мы как всегда что-то пишем</p>
           <p>Это следующий абзац </p>
</article>
<footer>&copy; Александр Побединский </footer>
</body>
</html>

В результате мы использовали два новых свойства CSS для задания размеров ширины структурных элементов: min-width, max-width. Из названий элементов понятно, что они означают (в примере я пометил их в комментариях). Первый способ основан на том, что при изменении ширины экрана устройства относительная ширина элементов не изменяется, единственное я указал минимальную ширину min-width в 320px, то есть если взять телефон с разрешением экрана 240px, то на экране появится полоса прокрутки. Здесь я думаю всё понятно.

Использование Media Queries

Замечательное свойство @media позволяет указать тип устройства и разрешение экрана, именно оно и используется для медиа запросов:

Тип Описание
all Все типы. Это значение используется по умолчанию.
aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.

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


@media screen and (max-width: 480px) {/* медиа запрос для смартфона */
    header h1 {
        background: green; /* фон заголовка */
        color:#ffffff; /* цвет заголовка */
   }
}

А теперь по подробнее: мы создали медиа запрос, который указывает, что если экран устройства меньше или равен 480px, то заголовок в шапке будет иметь зеленый фон и белый цвет текста заголовка. Здесь должно быть всё понятно.
Я же обычно использую другую конструкцию:


@media screen and (min-width: минимальное значение) and (max-width: максимальное значение) { /* медиа запрос для определенного экрана */
         элемент №1{
              свойство элемента №1 : значение;
              ...........
              и т.д.
         }
..........
         элемент №N{
              свойство элемента №1 : значение;
              ...........
              и т.д.
         }
}

Чтобы вам было понятно давайте усложним предыдущий код:


@media screen and (min-width: 481px) and (max-width: 960px){/* медиа запрос для планшета */
 header h1 {
        font-size:1.5em; /* Размер шрифта */
        background: #cccccc; /* фон заголовка */
        color:#ffffff; /* цвет заголовка */
   }
}
@media screen and (max-width: 480px) {/* медиа запрос для смартфона */
    header h1 {
        font-size:1.2em; /* Размер шрифта */
        background: green; /* фон заголовка */
        color:#ffffff; /* цвет заголовка */
   }
}

Вроде я всё расписал в комментариях. Здесь всё просто: при просмотре на планшете или смартфоне изменится фон и размер шрифта заголовка h1. Стоит лишь понять принцип действия Media Queries и всё встанет на свои места. Можно догадаться, что для адаптивной верстки сайта следует указать больше медиа запросов и естественно больше элементов и их свойств. Поэтому это очень кропотливый процесс, первый вариант проще, но он не может показать всю красоту вёрстки под мобильные устройства. При использовании правила @media вы можете менять все свойства интересующего вас элемента.

Похожие темы:



наверх