Адаптивна верстка сайту: покрокова інструкція з прикладами

Види макетів

Стандарти постійно удосконалюються, і, як наслідок, змінюються способи розробки макетів. На даний момент існує 3 основних виду сторінок:

  • статична;
  • гумова;
  • адаптивна.

Статичні макети, що являють собою сторінки, які не здатні змінювати своє оформлення. Їх дизайн не змінюється, а розміри елементів мають чітке значення.

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

При створенні гумової верстки також враховуються зміни розмірів екрану і всі елементи підлаштовуються. Головною відмінністю від адаптивної є те, що верстка розширюється або звужується під екран на кожному моменті змін.

Перевірити, який з принципів використовується, можна наступним чином. Якщо при розтягуванні вікна браузера сторінка розтягується разом з ним – значить, це гумова верстка. Коли сторінка сайту змінюється тільки в декількох положеннях – значить, це адаптивна.