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

15

Від автора: у майбутньому в світі інтернету очікується постійний приріст мобільного трафіку. Отже, вже зараз потрібно вміти верстати так, щоб ваш проект добре виглядав на всіх пристроях. Рішення давно знайдено – адаптивна верстка сайту! Про неї ми і поговоримо.

2 способи догодити мобільним користувачам

Найпростіший спосіб визначити, як зверстаний сайт – це зменшити розміри вікна. Якщо з’явилася горизонтальна смуга прокрутки, значить це фіксована верстка. Всі розміри задавалися, швидше за все, у пікселях. Зручно буде користуватися таким сайтом користувачам на мобільних пристроях? Немає.

По суті, є два рішення цієї проблеми. Перший – створити різні версії верстки (для ПК, для планшетів та мобільних телефонів). Саме так зроблено, наприклад, у соціальній мережі Вконтакте. Другий варіант – зробити адаптивну верстку. Такий сайт буде реагувати на зміну ширини вікна. Цей варіант сьогодні застосовується все частіше і частіше.

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

Рис. 1. Як бачите, навіть на мобільному телефоні webformyself непогано відображається.

Адаптивність – початок шляху

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

@media only screen and (max-width: 980px){}

Давайте розберемося детальніше з цим записом.

@media – власне позначення медіа-запиту

Screen – вказуємо, що це відноситься до екрану (тут також можна вказати телевізор або проектор). Only – означає, що правила будуть застосовані лише до screen.

And (і) – додавання умови, для якого працюватиме медіа-запит. Умова додається в круглих дужках.

Max-width: 980px – умовою. Простою мовою це означає, що медіа-запит буде працювати, коли ширина екрану складає максимум 980 пікселів (тобто від 0 до 980рх). Якщо ширина більше 980, правила не спрацюють. Найчастіше тут в якості умови виступають max-width, min-width, max-device-width, min-device-width. Останні два означають, що правила будуть працювати тільки на самих мобільних пристроях (тобто при зміні ширини вікна на комп’ютері горизонтальний скрол з’явиться). Також можна вказувати max-height, але це використовують дуже рідко.

{} – в цих фігурних дужках якраз прописуються всі css-правила. Їх може бути скільки завгодно. Наведу відразу кілька прикладів, щоб вам було зрозуміло:

@media only screen and (max-width: 980px){
.selector{background: black}
}
@media only screen and (min-width: 600px){
img{float: left}
}

Переводимо на людську мову: якщо ширина вікна менше 980 пікселів, то до елементу з класом selector буде застосовано правило {background: black}. Ще більш простою мовою – фон цього елемента стане чорним.

Другий приклад: якщо ширина вікна більше 600 пікселів, то всі зображення будуть притиснуті до лівого краю.

До вас вже дійшла вся геніальність цього способу верстки? По суті, з допомогою медіа-правил можемо скорегувати існуючі або дописати нові css-правила. Таким чином, ви зможемо повністю реалізувати адаптивний шаблон.

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

Рис. 2. Приклад медіа-запиту, в якому прописуються правила для широкоекранних моніторів.

Детальніше про адаптивності

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

Якщо вам потрібно щось простіше, просто щоб розібратися, то цей безкоштовний міні-курс підійде вам набагато краще. Він складається з п’яти відеоуроків, з яких ви зможете розібратися з основами. Курс дуже легкий, інформація підібрана спеціально для новачків. У той же час, ви зможете подивитися на декілька практичних прикладів, так що після його вивчення самі зможете адаптувати простий макет.

Складно освоїти адаптивну верстку?

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

Як тестувати адаптивність

Простіше за все робити це в браузері. Наприклад, у мене в Google Chrome при натисканні F12 з’являється відладчик. Спробуйте тепер змінити розміри вікна. У правому верхньому куті ви побачите значення його ширини. Це дуже зручно для того, щоб швидко перевірити свою верстку. Ще я можу порекомендувати responsivetest.net. Сервіс досить зручний і відмінно перевіряє адаптивність.

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

Рис. 3. При затисненні F12 з’являється відладчик. Тепер у правому верхньому куті можна бачити поточну ширину вікна при зміні.

Чому адаптивна верстка?

На початку статті я говорив про те, що існує й інший спосіб догодити мобільним користувачам – розробити окремо версії для різних пристроїв. А ви як думаєте, який спосіб простіше? Реалізувати адаптивність набагато легше. Це всього лише пару сотень додаткових рядків коду, а не окрема версія сайту, яка часто сильно відрізняється по дизайну. Як показує практика, мобільні версії своїх сайтів роблять тільки великі компанії, які можуть собі дозволити витратити більше грошей на розробку проекту.

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