Адаптивный дизайн

Все наши сайты, помимо компьютера, отлично работают на всех телефонах и планшетах, с удобной мобильной навигацией

Что такое адаптивный дизайн?

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

Понятие и термины адаптивного дизайна

Теперь немного терминологии, которая обычному человеку не всегда понятна:

  • Гибкие шрифты
  • Гибкий макет на основе сетки
  • Гибкие изображения
  • Медиазапросы

Давайте подробно разберём каждый из пунктов:

Гибкие шрифты - обычно шрифты задаются в пикселях (px), а заданы в (em) - такие шрифты могут менять размер при просмотре на портативных устройствах.

Гибкий дизайн или гибкий макет накладывается по принципу сетки - подобие изменчивого шаблона, которые меняет размеры не по пикселям, а в процентном соотношении (%).

Гибкие изображения - это картинки, меняющие размер относительно размера экрана устройства и заданной ширины соседних элементов..

Медиазапросы - если вы установили колонку шириной 600 пикселей, а видимая/просматриваемая часть менее 400 пикселей, то то колонку нужно выставить шириной 150 пикселей. На помощь нам приходят некоторые условия, выполняемые либо невыполняемые по средством медиазапросов.