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

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

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

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

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

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

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

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

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

Удобный интернет

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