Що таке адаптивна верстка?

Відео: Bootstrap: Як створюються сучасні адаптивні сайти (УРОК)

Всім привіт! Думаю, що багато хто з вас чули про таку річ як "адаптивна верстка"Або"Responsive makeup"(чуйна верстка). Сьогодні я трохи введу вас в курс справи, а в наступних статтях ми будемо заглиблюватися в цю тему.

Отже, що має на увазі під собою слово "чуйна"? чуйна верстка - це верстка, яка автоматично підлаштовується (адаптується) під то дозвіл пристрою, на якому в даний момент переглядає сторінку користувач. Наприклад, якщо ви дивитеся сторінку на великому екрані або навіть телевізорі, то у вас буде одне відображення сайту, а якщо ви переглядаєте ту ж сторінку на, наприклад, мобільному пристрої, то у вас буде вже зовсім інший вид даної сторінки.

Відео: Курс HTML і CSS. Адаптивна верстка сайту

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

Крім усього вищесказаного, замовники все частіше просять робити саме адаптивну верстку, тому знати її і вміти верстати даними способом зобов`язаний будь-який сучасний веб розробник.

Дізнатися все це краще в відео форматі і для цього є курc HTML5 та CSS3 з Нулі до Гуру, але, якщо ви віддаєте перевагу читати, а не дивитися, то підписуйтесь на оновлення, щоб не пропустити новий випуск по даній, дуже цікавої теми.

Тож почнемо.

Для початку нам потрібно дізнатися, що ж входить в поняття "адаптивна верстка"? А в дане поняття входить наступне:

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

Тепер поговоримо детальніше про все це.

гнучкі шрифти - це шрифти, які задано не жорстко в px(Пікселях), а в em, величиною, яка може змінюватися.

Подивимося на простий приклад

Що ми тут вказали? Я не просто так написав для тега body розмір 16px, адже це саме той розмір шрифту, який прийнятий за замовчуванням в браузерах. Тепер нам потрібно, спираючись на дане значення, вказати розмір шрифту в 24px для заголовка h1. Як це зробити? А дуже просто! Для цього є формула

мета / контекст = результат

Запам`ятайте цю формулу, вона нам ще знадобиться.

Нам потрібно отримати розмір шрифту 24px, вірно? - це буде наша мета.

У нас шрифт встановлений за замовчуванням - 16px - це контекст.

Вважаємо: 24/16 = 1.5

Тобто розмір для h1 буде 1.5em.

Отже, з цим розібралися.

Їдемо далі і поговоримо про гнучку сітці.

Як зрозуміло з назви, гнучка сітка - сітка, яка може змінюватися. Для чого це потрібно? Наприклад, на великому моніторі ми можемо показати користувачеві 3 колонки, але ж на мобільному пристрої йому буде незручно дивитися 3 колонки! Якщо людина зайшла з телефону, то треба залишити одну колонку і всього цього добитися нам допоможуть гнучкі сітки. Про них ми будемо детально говорити в окремій статті. Зараз я можу сказати лише те, що там замість px ми будемо використовувати %.

гнучкі зображення - дуже важлива і насправді неважка тема.

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

І останнє - медіазапроси.

Медіазапроси - це умови, які або виконуються, або не виконуються.

Наприклад, ми можемо поставити ширину колонки 500px, але, якщо ширина області перегляду користувача менше 300px, то ширину колонки потрібно встановити в 100px.

Такі і більш складні умови робляться за допомогою медіазапросов і це теж дуже цікава тема, яка буде дуже докладно розкрита в соотвествующей статті.

Отже, сьогодні ми розібрали, що таке адаптивна верстка, що входить в це поняття і навіть навчилися робити гнучкі шрифти.

Дякую за увагу і не пропустіть наступну статтю!