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

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

Основные принципы

Принцип отзывчивого макета, перестраивание блоков при изменении размера экрана. Для адаптивного дизайна применяются медия-запросы или сетка свойствами Flexible Box.

Макет веб-страницы ниже состоит из основных блоков для сайта.

Основные блоки для адаптивного веб-сайта
Начальный макет веб-страницы без медиа-запросов

Если ширина экрана больше чем 48em(768px), медиа-запрос меняет расположение блока aside.

Изменение расположения блока для адаптивного веб-сайта
Изменение расположения блока aside на экране по больше

Адаптивный шрифт

Чем меньше девайс, тем ближе человек держит его к лицу. Значит размер шрифта для чтения должен быть меньше, чем на большом экране.

Шрифт должен быть меньше, чем на большом экране
Расстояние чтения текста на мобильном телефоне

Регулировать размер шрифта для разных размеров экрана возможно только медиа-запросами.


body { /* ширина меньше 768px */
    font-size: 1rem;
}
@media all and (min-width:48em /* ширина больше 768px */) {
   body {
    font-size: 1.1rem;
  }
@media all and (min-width: 105em /* ширина больше 1680px */) { 
  body {
    font-size: 1.2rem;
  }

Адаптивный макет

Адаптивный макет хорош тот, который был продуман до конца. В современном мире возможен просмотр интернета на телевизорах с разрешением больше трёх тысяч пикселей. Модель сайта с фиксированной шириной 1024 пикселей, версия «Автоматическое масштабирование» для телевизоров с большим разрешением больше не актуальна. С другой стороны, материал страницы растянутый на всю ширину может дезориентировать читателя, скорее всего для такой ширины по краям нужно делать отступ 10-20%.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
  #wrap {
    margin: 0 15%;
  } 
}

@media tv and (min-width: 105em) {
...
}

Дополнительный материал:

54321
(8 голосов, в среднем: 4.3 из 5)