На блогах і форумах періодично зустрічаю таке поняття, як адаптивний веб-дизайн, і людей, які запитують, що це таке. Вирішив трохи підсумувати.
Вікіпедія визначає дане поняття як дизайн, за допомогою якого здійснюється «відмінне сприйняття на різних пристроях». Формулювання не сама зрозуміла, бо, мабуть, і виникають питання.
В дійсності все більш просто: під цим терміном розуміється створення таких сайтів, які будуть по-різному відображатися в різних пристроях — на широкому моніторі, на звичайному екрані, на планшеті і на мобільному телефоні.
При цьому не варто плутати адаптивність ні з простою гумової версткою, в якій верстка DIV робиться таким чином, що сторінка просто розтягується під ширину дисплея, ні з створенням мобільних версій сайтів, які найчастіше розташовуються на окремому піддомені типу m.вашсайт.ру.
Адаптивність в першу чергу задається через визначення різних властивостей CSS залежно від дозволу дисплея — з допомогою завдання умови @media screen і властивостей css min-device-width, max-device-width.
Ось приклад коду для того, щоб зробити адаптивної сторінку — вона буде відображатися по-різному на звичайному моніторі з шириною дозволу 1200 піскелів і на дисплеї мобільного телефону з роздільною здатністю 640 пікселів:
@media screen and (max-width: 1200 px) { /* початок умови */
#main { /* контент буде зліва */
width: 75%;
float: left;}
#sidebar { /* сайдбар буде праворуч */
width: 25%;
float: right;}
} /* кінець умови */
@media screen and (max-width: 640px) { /* початок умови */
#main { /* контент розтягнеться на весь екран */
width: 100%;
}
#sidebar { /* сайдбар розташується з нового рядка */
width: 100;
}
} /* кінець умови */
Загалом, пора закидати старі методи і припиняти використовувати тег пробілу в html, а замість цього переходити на CSS та адаптивні технології! Головне — не забути перевірити сайт на валідність ))
