Адаптивна верстка на html5 та css3. Відеокурс «Адаптивна верстка на HTML5 та CSS3. Стилі для блоку з основним вмістом

Адаптивна верстка сайту дозволяє веб-сторінкам автоматично підлаштовуватися під екрани планшетів та смартфонів. Мобільний інтернет-трафік зростає з кожним роком і, щоб ефективно обробляти цей трафік, потрібно пропонувати користувачам адаптивні сайти зі зручним інтерфейсом.

Пошукові системи використовують низку критеріїв для оцінки адаптивності сайту під час перегляду на мобільних пристроях. Google намагається спростити користування Інтернетом для власників смартфонів та планшетів, відзначаючи в мобільній видачі адаптовані під мобільні пристрої сайти спеціальною позначкою mobile-friendly. В Яндексі також працює алгоритм, який надає перевагу сайтам з мобільною/адаптивною версією для користувачів у мобільному пошуку.

Перевірити відображення сторінки на мобільних пристроях можна на сервісах та .

Мал. 1. Мобільна видача Яндекса та Google з позначкою про дружелюбність сайту до мобільних пристроїв Що таке адаптивна верстка

Адаптивна верстка передбачає відсутність горизонтальної смуги прокручування і областей, що масштабуються при перегляді на будь-якому пристрої, читабельний текст і великі області для клікабельних елементів. За допомогою медіазапитів можна керувати компонуванням та розташуванням блоків на сторінці, перебудовуючи шаблон таким чином, щоб він адаптувався до різних розмірів екранів пристроїв.

Основні прийоми створення адаптивного сайту наведено у статті. Для чуйного дизайну ширина основного контейнера сайту задається в %, при цьому вона може дорівнювати як 100% ширини вікна браузера, так і менше. Ширина стовпців сітки також задається у %. В адаптивному дизайні ширина основного контейнера та стовпців сітки фіксується за допомогою значень px .

Прийом адаптивної гумової верстки, що розглядається в даному уроці, відмінно спрацює на двоколоночному шаблоні, зробивши сайт адаптивним і зручним для перегляду на мобільних пристроях. Шаблон передбачає різне компонування основного вмісту сторінок, у цьому уроці буде розібрано верстку головної сторінки.

Верстка головної сторінки

Сторінка складається з трьох основних блоків: верхній колонтитул (шапка), контейнер-обгортка для основного вмісту та сайдбару, та нижній колонтитул (футер). Як переломні точки дизайну візьмемо 768px і 480px .

У першій точці приховати верхнє меню і перемістити сайдбар під контейнер з постами. У другій точці змінимо розташування елементів шапки, скасуємо позиціонування кнопок соціальних мереж у постах та скасуємо обтікання стовпців підвалу сторінки.


Мал. 2. Приклад адаптивної верстки 1. Метатеги та розділ

1) Додамо в розділ необхідні файли - посилання на використовувані шрифти, бібліотеку jQuery, а також плагін prefixfree (щоб не писати для властивостей браузерні префікси):

Адаптивна верстка сайту

2. Шапка сторінки

У шапці сторінки помістимо такі елементи-контейнери:
логотип

ПОХОДЖЕННЯ СТАТТІ