Что такое адаптивный веб-дизайн и для чего он нужен

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

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

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

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

Если Вы нашли для себя что-то полезное на этой странице, пожалуйста, нажмите на одну из этих кнопок:
pedant.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>