Типи верстки

У сучасній веброзробці застосунок однаково комфортно для користувача має відтворюватися на різних пристроях. Для цього веб-дизайнери розробляють макет одного застосунку для різних ширин екранів та пристроїв.

Переважно дизайнери розробляють три макети для застосунку:

• Для мобільних пристроїв (mobile)

• Для планшетів (tablet)

• Для компʼютерів (desktop)

Утім не уникнути ньюансів. Адже ширини мобільних пристроїв хоч і переважно стандартизовані, але можуть сильно відрізнятися. І якщо створити дизайн для однієї ширини, то на ширших екранах лишатиметься по боках вільний простір.

У звʼязку із цим в сучасній розробці існує два підходи до верстки сайтів:

• адаптивний підхід (adaptive)

• респонсивний підхід (responsive)

Підходи «адаптивної» і «респонсивної» верстки відрізняються тим, яким чином задається ширина контейнера і вкладених в нього елементів.

Адаптивна верстка використовує фіксовані точки перелому (breakpoints), коли дизайн сайту змінюється для відображення на різних пристроях. На кожному breakpoint веб-сайт може мати свій власний набір стилів та розмірів. Пристрої, які не входять в ці точки перелому, можуть отримувати менш оптимізоване відображення. Тобто браузер підбирає найкращий адаптований варіант верстки для даного розміру вʼюпорту.

Респонсивна верстка використовує відносні одиниці виміру та відносні стилі для елементів. Замість фіксованих точок перелому, елементи веб-сайту реагують на розміри екрану пристрою неперервно, змінюючи свої розміри та розташування згідно з розміром viewport. Це так звані "гумові сайти", які розтягуються під ширину екрану.

Під час написання медіа-запитів треба опиратися на визначені точки перелому дизайну. Це ширини в'юпорту ри яких суттєво змінюється дизайн. Їх можна визначити за макетом, створеним дизайнером.

У прикладі нижче встановлено точки перелому: 480px, 768px, 1024px, 1280px. На цих точках в обох контейнерів міняється колір.

У адаптивного блоку в точках перелому ширина блоку набуває фіксованого значення визначеного для ширини екрану вище якогось значення. У респонсивного блоку ширина встановлюється 100% ширини батьківського контейнера.

.adaptive {
 width: 100%;
 background-color: brown;
  
  @media (min-width: 480px) {
  width: 460px;
  background-color: violet;
  }
  
  @media (min-width: 768px) {
  width: 748px;
  background-color: orange;
  }
  
  @media (min-width: 1024px) {
  width: 1004px;
  background-color: green;
  } 
  
  @media (min-width: 1280px) {
  width: 1260px;
  background-color: red;
  }  
}

.responsive {
  width: 100%;
  background-color: brown;
  
  @media (min-width: 480px) {
  background-color: violet;
  }
  
  @media (min-width: 768px) {
  background-color: orange;
  }
  
  @media (min-width: 1024px) {
  background-color: green;
  } 
  
  @media (min-width: 1280px) {
  background-color: red;
  }   
}

При цьому адаптивний блок на вʼюпорті до 480px буде мати властивості респонсивного блоку, бо встановлено width: 100%;.

Щоб побачити цей ефект в дії відкрийте приклад CodePen в окремому вікні натиснувши Edit on Codepen і міняйте ширину вікна. На 480px, 768px, 1024px та 1280px ви побачите однакову ширину обох блоків. У проміжних ширинах адаптивний блок матиме фіксовану ширину, а респонсивний розтягуватиметься по ширині.

Який підхід використовувати - залежить від дизайну, типу веб-сайту і фінансових можливостей замовника. Для більшості веб-сайтів малого та середнього бізнесу достатньо адаптивної версії.

Респонсивна верстка дорожча в дизайні, проєктуванні та розробці. Її складніше і довше робити, але вона незамінна в інтерфейсах сучасних веб-застосунків.

Покликання:

Основні концепції адаптивної та респонсивної верстки

Адаптивна верстка

Адаптивна і респонсивна верстка. Що краще?

Адаптивна і респонсивна верстка

Респонсивний і адаптивний дизайн

Адаптивна і респонсивна верстка