Адаптивная (“реагирующая”) верстка

Широкое развитие всевозможных мобильных устройств и гаджетов все сильнее влияет на нашу жизнь, коснулась это и Интернета и создания сайтов в частности. Для того что бы пользователь смог просматривать ресурс на своем устройстве без необходимости постоянно масштабировать окно браузера была придумана технология “Адаптивной верстки сайтов”, которая позволяет страницам ресурса “приспосабливаться” под любое разрешение экрана.

Верстка – это процесс формирования шаблона сайта из исходного дизайн-макета, иными словами – преобразование картинки в полноценный Интернет-ресурс. Что же такое “Адаптивная” (“реагирующая”) верстка?

Адаптивная (“реагирующая”) верстка

Адаптивная” верстка сайта, которую также называют “Респансивной” – это такой прием создания html макета, при котором внешний вид сайта “реагирует” (видоизменяется) в зависимости от того, на экране какого размера просматривается сайт. При этом страница может кардинально менять свой вид: шрифты могут становиться мельче или же напротив крупнее, некоторые блоки могут пропадать, а на их место могут появляться другие, более приспособленные под данное разрешение экрана, прочие блоки могут просто менять свое положение и/или ориентацию.

Понятие “Адаптивная” (“реагирующая”) верстка вкличает в себя следующие приемы создания сайтов:

  1. Резиновый макет (сайт растягивается во всю ширину экрана)
  2. Резиновые изображения (картинки на сайте автоматически меняют свои размеры в зависимости от размеров экрана)
  3. Использование “Медиа-запросов (Media queries)” (как раз таки преобразование всех элементов сайта в зависимости от размера окна браузера)
  4. Использование принципа “Mobile first” – мобильные устройства на первом месте (сайты, созданные по этому принципу, в первую очередь адаптированы под мобильные устройства, компьютерам и прочей технике здесь отведена второстепенная роль)

Техника “реагирующей” (“адаптивной”) верстки основана на технологии CSS3, который является современным стандартом проектирования сайтов, поэтому некоторые разновидности старых версий браузеров её не поддерживают.

Разрешения экрана, учитываемые при создании адаптивной верстки: 1920x1080 пикс., 1680x1050 пикс., 1600x1200 пикс., 1440x900 пикс., 1366x768 пикс., 1280x1024 пикс., 1280x800 пикс., 1152x864 пикс., 1024x768 пикс., 800x600 пикс., 640x480 пикс., 240x320 пикс.

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

Все наши проекты, адаптированы под мобильные устройства, удобны для пользователей и как следствие - быстроокупаемы.

Хотите заказать адаптивную верстку?

Наш практический опыт в создании сайтов гарантирует Вашему проекту высокий уровень реализации в оптимальные сроки.

Полезная информация