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