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

Адаптивные сайты, что это такое?

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

Резиновая сетка

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

Гибкое изображение

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

Медиа запросы

Суть данного способа — создание несколько макетов страниц. Создается несколько стилей под определенные размеры экрана, ориентацию страниц и т.д. Далее делаются специальные медиа запросы. Все это позволяет определенные стили при отображении на определенных мобильных устройствах — смартфонах или планшетных компьютерах.

Адаптивные шаблоны и сайты появились сравнительно недавно. Такие сайты весьма полезны с точки зрения юзабилити сайта. Этим и объясняется их высокая популярность и массовость. Вот вкратце и все, что касается адаптивных сайтов.