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

У мене багато разів запитували, як робиться верстка для мобільних пристроїв, у яких дозвіл зазвичай набагато менше, ніж у ноутбуків і, тим більше, настільних комп`ютерів. Так ось механізм, який дозволяє зробити верстку для мобільних пристроїв називається адаптивна верстка. Про неї ми і поговоримо в цій статті.

Перше, що потрібно зрозуміти - це те, що адаптивна верстка - це не гумова. Гумова верстка стискається при зменшенні ширини екрану, тоді як адаптивна верстка не стискується, а саме адаптується під ширину. Як це відбувається? Це робиться через так звані медіа-запити в CSS, про які ми поговоримо в наступній статті.

Ці медіа-запити дозволяють змінювати верстку при зміні ширини екрану. Наприклад, можна зробити так, щоб якщо ширина вікна більше 800px, то, наприклад, відступи на сторінці в body 10px. А при ширині 800px і менше, наприклад, 3px. Це і є приклад адаптивної верстки.

Таким чином, можна адаптувати верстку навіть під зовсім маленькі екрани з мізерним дозволом.

Іншими словами, адаптивна верстка - це окремі стилі для різних випадків. Для пристрою з одним дозволом - одні стилі, для пристрою з іншим дозволом - інші.

У наступній статті ми розберемо основний механізм адаптивної верстки - медіа-запити.