Адаптивный дизайн для сайта

Независимо от того, новичок вы или опытный профессиональный вебдизайнер, при создании адаптивного дизайна для вашего сайта у вас могут возникнуть некоторые  трудности в первую очередь из-за того, что для этого требуются радикальные изменения в мышлении.  Со временем адаптивный веб-дизайн становится повседневной практикой.   Это новый способ проектирования веб-сайтов, и за ним будущее.
Что такое адаптивный дизайн?
В настоящее время мобильные технологии и планшетные устройства переживают бум своего развития. И в каждом из видов девайсов ваш сайт или блог выглядит по-разному. Согласитесь, что это далеко не всегда бывает удобно. Для наглядности, я приведу пример, как отличается сайт при разном разрешении экрана.

Трудно говорить об адаптивном дизайне без упоминания его создателя Итона Маркотте.  В своей статье об адаптивном веб-дизайне, Итон рассматривает все технические моменты адаптивного вебдизайна. 
Меняющийся вид веб-браузеров, предназначенных для различных мобильных устройств, означает, что запросы пользователей также изменились, люди должны иметь возможность просматривать веб-страницы на свои телефонах так же легко, как они просматривать веб-страницы на рабочем столе компьютера.  Так, в ответ на это, вебдизайнеры начали создавать мобильные версии своих сайтов.  Изменились и принципы адаптивной вёрстки
Развитие не останавливается на этом, она идет вперед, так что не долго после того, как на рынке аппаратных телефонов были революцию, другие форм-факторы выросли в популярности.  В дополнение к телефонам и персональным компьютерам, устройствах, стали появляться небольшие ноутбуки (нетбуки).
И это проблема не только маленьких экранов.  Больших, дисплеев с высоким разрешением становится гораздо больше, чем  раньше.
Итак, рассмотрим самые основополагающие моменты адаптивного вебдизайна.

Жидкие сетки

Первая ключевая идея адаптивного дизайна является использование жидкой сетки.  В последнее время, создание «жидких макетов», которые расширяются вместе со страницей не было столь популярным, как создание шаблонов фиксированной ширины.  Однако, если принять во внимание огромное количество разрешений экрана, которые присутствуют в условиях современного рынка, то плюсы жидкого макета очевидны.
Жидкость сети являются очень важной частью создания адаптивного дизайн, но они могут решить только часть проблем.  При крайне узкой ширине браузера мобильного устройства, конструкция сайта может  ломаться.  Например,  шаблон сайта с тремя колонками не будет корректно отображаться на небольшом экране мобильного телефона.  К счастью, адаптивный дизайн решает эту проблему с помощью медиа-запросов.

Медиа- запросы (Media Queries)

Вторая часть адаптивного дизайна - CSS3 медиа-запросы, которые в настоящее время поддерживают большинство современных браузеров.  CSS3 медио-запросы позволяют собирать данные о посетителе сайта и, в зависимо от этого,  использовать те или иные CSS стили.  В данном случае, мы в первую очередь заинтересованы в определении ширины экрана монитора нашего пользователя.
Пример медиа-запроса в зависимости от разрешения экрана монитора
@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... }