На блогах и форумах периодически встречаю такое понятие, как адаптивный веб-дизайн, и людей, которые спрашивают, что это такое. Решил немного суммировать.
Википедия определяет данное понятие как дизайн, с помощью которого производится «отличное восприятие на различных устройствах». Формулировка не самая понятная, потому, видимо, и возникают вопросы.
В действительности все более просто: под этим термином понимается создание таких сайтов, которые будут по-разному отображаться на различных устройствах — на широком мониторе, на обычном экране, на планшете и на мобильном телефоне.
При этом не стоит путать адаптивность ни с простой резиновой версткой, в которой верстка 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 и адаптивные технологии! Главное — после этого не забыть проверить сайт на валидность ))