Ім'я файлу: Презентація Адаптивна верстка.pptx
Розширення: pptx
Розмір: 6749кб.
Дата: 12.02.2024
скачати

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

Модуль «Веб-технології»

З історії мобільного інтернету

  • Веб-сайти десктопної версії мали широкий функціонал і яскраве оформлення, а отже довго завантажувалися та забирали занадто багато трафіку. Тому з’явились вап-сайти, призначені для перегляду з мобільного телефону, які містили в основному текст і поодинокі зображення. Нагадаємо на той час мобільні телефони були слабкі, а мобільний Інтернет повільний і дуже дорогий.
  • Поява планшетів створила нові виклики – фіксована верстка не дозволяла змінювати розмір роздільності сайта. Великі сайти переглядати з планшетів було незручно, а мобільні сайти не були оптимізовані під екран великих розмірів.

Гумова верстка

Макету і окремим його складовим надаються розміри, подані у відсотках, таким чином вміст сторінки розтягується. Для того, щоб розтягнути сайт і на 6-дюймовий екран смартфона і 42-дюймовий екран телевізора необхідно встановити максимальний і мінімальний розміри ширини (властивості max-width і min-width відповідно)

Медіа-запити

  • У 2006 році в інтернет-журналі A List Apart (https://alistapart.com/) вийшла стаття Марка ван ден Доббельстіна, який запропонував створити класи в залежності від пристрою та оголошувати кожному класу спеціальні стилі.
  • Медіа-запити (media queries) — це правила CSS, які дозволяють керувати стилями елементів залежно від значень технічних параметрів пристроїв.
  • У 2001 році в HTML4 і CSS2 була введена підтримка апаратнозалежних таблиць стилів, що дозволило створювати стилі й таблиці стилів для певних типів пристроїв.

Медіа-запит є логічним виразом, який повертає істину або хибність.


Оголошення медіазапиту

Вираз перевіряє відповідність розміру

Стиль спрацює, якщо умова виконується

Брейкпоінт

  • прив’язка до конкретних пристроїв з певною роздільністю екрану. Стилі перемикаються від одного брейкпоінта (контрольні точки, сталий термін у програмуванні, у випадку верстки — перемикання з одних умов на інші) до іншого, тобто насправді є фіксовані макети для кожного девайсу

Поміркуйте

На рисунку наведено використання медіа-запитів для різних пристроїв

Визначте тип прстроїв

Адаптивні сайти

  • з’явилися завдяки зростанню попиту тих користувачів, які хочуть завантажувати веб-сторінки з ідеальною структурою на всіх своїх пристроях. Адаптивний дизайн стає обов'язковим. Він значно спрощує регулярний серфінг в Інтернеті незалежно від того, який пристрій вибрав користувач для доступу до сайтів, що його цікавлять

Цікаво

  • Ідея розробки адаптивної верстки належить Аарону Густафсону. У своїй книзі «Адаптивний веб дизайн» він запропонував гнучко адаптувати сайти до можливостей пристроїв і браузерів.

Цікаво

  • За Аароном Густафсоном адаптивність — це особливий підхід до розробки сайта, який дозволяє вже наявним веб-ресурсам підлаштовуватися під розміри екранів різних пристроїв. Інакше говорячи, сторінка повинна автоматично підлаштовуватися під екран, змінювати розмір картинок тощо. Це дозволило усунути потребу в розробці дизайну для кожного нового типу пристрою.

Цікаво

  • Традиційно макет сайта спочатку розробляється для десктопної версії, а вже потім адаптується до мобільної. Люк Вроблевскі у своїй книзі «Спочатку мобільні» запропонував піти від протилежного: розробити макет сайта для мобільної версії, а вже потім покращувати до десктопної. Вроблевскі керувався тим, що ускладнювати просте легше, ніж спрощувати складне.

Цікаво


Концепцію чуйного дизайну запропонував Ітан Маркотт у 2010 році та описав у своїй книзі «Responsive Web Design». Особливістю такого підходу стала плавна зміна сайта, зорієнтована на вміст, а не на конкретні пристрої.

Основні особливості адаптивного дизайну

• застосування гнучкого макета на основі сітки (англ. flexible, grid-based layout); • використання гнучких зображень (англ. flexible images); • робота з медіа-запитами (англ. media queries); • плавна перебудова блоків у разі зміни розміру екрана (наприклад, під час повертання планшету)

Модуль Flexbox

  • CSS Flexbox (Flexible Box Layout Module) — модуль макета гнучкого контейнера, що являє собою спосіб компонування елементів. Технологія flexbox ставить на меті зробити шари гнучкими, а роботу з ними інтуїтивно зрозумілою. Flexbox складається з гнучкого контейнера (flex container) і гнучких елементів (flex items). Останні можуть вибудовуватися в рядок або стовпець, а вільний простір розподіляється між ними різними способами

Flexbox дозволяє:

  • розташовувати елементи в одному з чотирьох напрямків: зліва направо, справа наліво, зверху вниз або знизу вгору; • перевизначати порядок відображення елементів; • автоматично визначати розміри елементів так, щоб вони вписувалися в доступний простір; • розв’язувати проблему з горизонтальним і вертикальним центруванням; • переносити елементи всередині контейнера, не допускаючи його переповнення; • створювати колонки однакової висоти.
  • керувати елементами в одновимірному просторі

Display

Щоб почати працювати з Flexbox, необхідно зробити контейнер flex-контейнером. Робиться це так:


.container { display: flex; }

Flex-direction – напрямок головної вісі flex-контейнера.

  • Головною віссю flex-контейнера є напрям, відповідно до якого розташовуються всі його дочірні елементи.
  • Поперечною віссю називається напрямок, перпендикулярний головній вісі.
  • Головна вісь за замовчуванням розташовується зліва направо. Поперечна - згори вниз.

Justify-content

  • визначає те, як будуть вирівняні елементи уздовж головної осі.

Align-items

  • визначає те, як будуть вирівняні елементи уздовж поперечної осі.
  • Щоб зрозуміти, як працює модуль переглянемо наступне відео. У нас є заздалегідь створені 4 різнокольорових div'а різних розмірів, які знаходяться всередині сірого div'а. У кожного div'а є властивість display: block. Тому кожен квадрат займає всю ширину рядка.
  • Для більш детального вивчення властивостей модуля Flexbox радимо скористатись одним з кращих сайтів для вивчення каскадних таблиць стилів CSS-TRICKS
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Модуль Grid

Grid дозволяє оперувати стовпцями та рядками. Grid container (грід-контейнер) — це набір горизонтальних і вертикальних grid-ліній, що перетинаються. Ці лінії ділять простір на grid-області, де розташовуються grid-елементи. Усередині grid-контейнера є два набори grid-ліній: один визначає вісь стовпців, інший — вісь рядків.

Завдання для самостійного виконання

  • Для розуміння роботи адаптивного шаблону відкрийте сторінку Google.
  • Зменшуйте розмір вікна браузера і слідкуйте за тим, як змінюються положення блоків, зникають зображення, як перетворюється меню в результаті зменшення вікна браузера.
  • Опишіть зміни у відображенні сторінки під час застосування режиму інспекції.
  • Перегляньте код. З'ясуйте, який механізм використовують розробники сайта для досягнення адаптивності.

Підказка: для перегляду коду натисніть на кнопку, вказану на рисунку

Домашнє завдання

  • Спробуйте свої сили в грі Flexbox Froggy, де потрібно допомагати жабеняті Фрогі та його друзям написанням css-коду (https://flexboxfroggy.com/#uk). Пройдіть перші шість рівнів. Скріншот результату надішліть на поштову скриньку вчителю.

скачати

© Усі права захищені
написати до нас