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

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

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

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