ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Мы все давно пользуемся мобильными телефонами. Мобильник 10-летней давности резко отличается от современных мобильных устройств. Время шло. Мобильные технологии быстро изменили наш мир. Все больше и больше людей выходят в интернет посредством мобильных телефонов. Как сделать так, чтобы контент сайтов, которые разрабатывались под традиционные компьютерные устройства, можно также видеть и в мобильных браузерах?

Одним из таких методов является адаптивный веб дизайн. Адаптивный веб дизайн — один из наиболее простых и быстрых способов сделать так, чтобы тот или иной сайт прекрасно работал на многих устройствах. При этом вы сможете использовать уже имеющиеся у вас навыки веб-разработки.

В зависимости от условий, в которых находится браузер в данный момент, например, размер окна, ориентация устройства и соотношение сторон, мы можем применять разный CSS в различных случаях. Путем пересмотра подхода к генерированию макетов страниц мы сможем сделать так, чтобы прежние, не учитывающие индивидуальных особенностей колоночные макеты и макеты сетки более легко "разливались" по диапазону размеров окон браузеров.

Существует три основные методики создания адаптивных веб сайта:

1. Медиазапросы CSS — оценка определенных аспектов текущей среды браузеров с целью определения того, какой CSS следует применять.
2. Макеты резиновой сетки — использование относительных CSS-пропорций вместо абсолютных размеров в случае с элементами макета страницы.
3. Резиновые изображения и медиа — обеспечение маштабирования изображений и медиа с целью соответствия ограничениям, налагаемые размерами их контейнеров, путем использования CSS-трюков.

Сайт, на котором вы находитесь, был адаптирован под мобильные устройства, с использованием медиазапросов. Как он выглядит в различных мобильных браузерах показано ниже.

В IPhone 5

В Samsung

В LG

Далее мы рассмотрим конкретный пример применения медиазапроса к адаптации сайта для различных мобильных устройств.

Мы отредактируем макет целой страницы, чтобы она красиво отображалась на экранах разного размера. Для этого мы применим следующие возможности CSS3:

1. медиазапросы, выборочно применяющие стили в зависимости от свойств пользовательского устройства;
2. много столбцовый макет, для того чтобы текст перетекал между расположенными бок о бок столбцами.