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

Вікіпедія визначає дане поняття як дизайн, за допомогою якого здійснюється «відмінне сприйняття на різних пристроях». Формулювання не сама зрозуміла, бо, мабуть, і виникають питання.

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

При цьому не варто плутати адаптивність ні з простою гумової версткою, в якій верстка 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 та адаптивні технології! Головне — не забути перевірити сайт на валідність ))

Соц закладки
Соц закладки