Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Чуйний веб-дизайн

  1. огляд чуйності
  2. Чуйний, адаптивний і мобільний
  3. гнучкі макети
  4. Відносні розміри області перегляду
  5. гнучка сітка
  6. Демонстрація гнучкою сітки
  7. Медіа-запити
  8. Ініціалізація медіа-запитів
  9. Логічні оператори в медіа-запитах
  10. Опускаємо тип носія
  11. Медіа-функції в медіа-запитах
  12. height і width
  13. Використання префіксів min і max
  14. orientation
  15. aspect-ratio
  16. pixel-ratio
  17. resolution
  18. Інші медіа-функції
  19. Підтримка медіа-запитів в браузерах
  20. Демонстрація медіа-запитів
  21. Визначення контрольних точок
  22. спочатку мобільні
  23. демонстрація
  24. спочатку мобільні
  25. viewport
  26. Висота і ширина області перегляду
  27. Масштабування області перегляду
  28. Дозвіл області перегляду
  29. комбінація значень
  30. правило @viewport
  31. Гнучкий медіа-контент
  32. Демонстрація гнучких зображень
  33. Демонстрація гнучкого відео

Наша взаимовыгодная связь https://banwar.org/

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

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

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

огляд чуйності

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

термін чуйний веб-дизайн сам по собі придумав і в значній мірі розробив Ітан Маркотт. Багато що з того, що розглянуто в цьому уроці було вперше сказано Ітаном в мережі і в його книзі Чуйний веб-дизайн , Яку варто прочитати.

Багато що з того, що розглянуто в цьому уроці було вперше сказано Ітаном в мережі і в його книзі   Чуйний веб-дизайн   , Яку варто прочитати

Мал. 4.01. Food Sense має гарний дизайн, чуйний при самих різних розмірах вікна. Незалежно від того, наскільки екран великий або маленький, сайт Food Sense підлаштовується під нього, створюючи природний користувальницький досвід.

Чуйний, адаптивний і мобільний

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

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

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

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

гнучкі макети

Чуйний веб-дизайн розбивається на три основних компоненти, включаючи гнучкі макети, медіа-запити і гнучкий медіа-контент. Перша частина, гнучкі макети - це практика побудови макета сайту з гнучкою сіткою, яка здатна динамічно зменшувати розмір до будь-якої ширини. Гнучкі сітки будуються з використанням відносних одиниць довжини, як правило, відсотків або одиниць em. Ці відносні довжини потім застосовуються, щоб оголосити основні значення властивостей сітки, таких як width, margin або padding.

Відносні розміри області перегляду

CSS3 ввів кілька нових відносних одиниць довжини, зокрема, пов'язаних з розміром області перегляду браузера або пристрою. Ці нові одиниці включають vw, vh, vmin і vmax. Загальна підтримка цих нових одиниць не велика, але вона росте. Згодом вони почнуть відігравати велику роль в побудові чуйних сайтів.

vw Ширина області перегляду vh Висота області перегляду vmin Менше значення з ширини і висоти області перегляду vmax Більше значення з ширини і висоти області перегляду

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

Формула заснована на взяття цільової ширини елемента і розподілі її на ширину батьківського елемента. Результатом є відносна ширина цільового елемента.

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

гнучка сітка

Давайте подивимося, як ця формула працює всередині двоколонковому макета. Нижче у нас є батько з класом container, який обертає елементи <section> і <aside>. Мета полягає в тому, щоб <section> розташовувався зліва, а <aside> праворуч, з однаковими відступами між ними. Як правило, розмітка і стилі для цього макета будуть виглядати дещо схоже на наступне.

HTML

<Div class = "container"> <section> ... </ section> <aside> ... </ aside> </ div>

CSS

.container {width: 538px; } Section, aside {margin: 10px; } Section {float: left; width: 340px; } Aside {float: right; width: 158px; }

Використовуючи формулу гнучкою сітки можна взяти все фіксовані одиниці довжини і перетворити їх у відносні одиниці. У цьому прикладі ми скористаємося відсотками, але одиниці em працюватимуть також добре. Зауважте, незалежно від того, наскільки широким стає батьківський container, margin і width для <section> і <aside> масштабируются пропорційно.

section, aside {margin: 1.858736059%; / * 10px ÷ 538px = .018587361 * /} section {float: left; width: 63.197026%; / * 340px ÷ 538px = .63197026 * /} aside {float: right; width: 29.3680297%; / * 158px ÷ 538px = .293680297 * /}

Демонстрація гнучкою сітки

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

Одного гнучкого макета саме по собі недостатньо. Часом ширина браузера може бути настільки мала, що навіть пропорційне збільшити вигляд буде створювати занадто вузькі колонки для ефективного відображення контенту. Зокрема, коли макет стає занадто малий або занадто великий, текст може стати нерозбірливим і компоновка може зламатися. В цьому випадку можуть бути використані медіа-запити, які допоможуть залишити краще враження.

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

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

Ініціалізація медіа-запитів

Є кілька різних способів застосування медіа-запитів - за допомогою правила @media в існуючій таблиці стилів, імпорту нової таблиці стилів через правило @import і шляхом посилання на окрему таблицю стилів всередині HTML-документа. Взагалі кажучи, рекомендуємо використовувати правило @media всередині існуючої таблиці стилів, щоб уникнути будь-яких додаткових HTTP-запитів.

HTML

<! - Окремий CSS-файл -> <link href = "styles.css" rel = "stylesheet" media = "all and (max-width: 1024px)">

CSS

/ * Правило @media * / @media all and (max-width: 1024px) {...} / * Правило @import * / @import url (styles.css) all and (max-width: 1024px) {.. .}

Кожен медіа-запит може включати в себе тип носія, за яким слід одне або кілька виразів. Основні типи носіїв включають в себе all, screen, print, tv і braille. Специфікація HTML5 містить нові типи носіїв, включаючи навіть 3d-glasses. Якщо тип носія не може бути вказано, медіа-запитом за замовчуванням буде screen.

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

Логічні оператори в медіа-запитах

Логічні оператори в медіа-запитах допомагають побудувати потужні вираження. Існують три різних логічних оператора, доступних для використання в медіа-запитах: and, not і only.

Використання логічного оператора and в медіа-запиті дозволяє додати додаткову умову і переконатися, що браузер або пристрій одночасно виконує а, б, в і т. Д. Кілька окремих медіа-запитів можуть бути розділені коми, діючи як негласний оператор or (або). У наведеному нижче прикладі вибираються всі типи носіїв з шириною між 800 і 1024 пікселів.

@media all and (min-width: 800px) and (max-width: 1024px) {...}

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

@media not screen and (color) {...}

Логічний оператор only є новий оператор і не розпізнається браузерами, що використовують алгоритм HTML4, що дозволяє приховати стилі від пристроїв або браузерів, які не підтримують медіа-запити. Вираз нижче вибирає тільки екрани в портретній орієнтації на пристроях, здатними працювати з медіа-запитами.

@media only screen and (orientation: portrait) {...}

Опускаємо тип носія

При використанні логічних операторів not і only тип носія може бути відкинутий. У цьому випадку тип носія за замовчуванням приймається all.

Медіа-функції в медіа-запитах

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

height і width

Одна з найбільш поширених медіа-функцій обертається навколо визначення висоти або ширини області пристрій відобразився або браузера. Висота і ширина можуть бути знайдені за допомогою медіа-функцій height, width, device-height і device-width. Кожна з цих медіа-функцій також може бути використана з префіксом min або max, на кшталт min-width або max-device-width.

Функції height і width базуються на висоті і ширині області візуалізації, вікна браузера, наприклад. Функції device-height і device-width з іншого боку засновані на висоті і ширині вихідного пристрою, яке може бути більше, ніж фактична область візуалізації. Значним цих медіа-функцій може бути будь-яка одиниця довжини, відносна або абсолютна.

@media all and (min-width: 320px) and (max-width: 780px) {...}

В чуйну дизайні найбільш часто використовувані функції включають min-width і max-width. Вони допомагають побудувати чуйні веб-сайти на комп'ютерах і мобільних пристроях однаково, уникаючи плутанини з особливостями пристроїв.

Використання префіксів min і max

Префікси min і max можуть бути використані з багатьма медіа-функціями. Префікс min вказує значення більше або дорівнює, тоді як префікс max вказує значення менше або дорівнює. Використання префіксів min і max дозволяє уникнути конфлікту із загальним синтаксисом HTML, без спеціального задіяння символів <і>.

orientation

Медіа-функція orientation визначає, чи знаходиться пристрій в альбомній (landscape) або портретної (portrait) орієнтації. Режим landscape спрацьовує, коли дисплей ширше, ніж висота, режим portrait спрацьовує, коли висота дисплея більше ширини. Ця медіа-функція грають роль в основному з мобільними пристроями.

@media all and (orientation: landscape) {...}

aspect-ratio

Функції aspect-ratio і device-aspect-ratio визначають співвідношення ширини до висоти в пікселях цільової області візуалізації або пристрої виведення. Префікси min і max доступні для використання з різними функціями, виявляючи співвідношення вище або нижче того, про який йдеться.

Значення функції складається з двох позитивних цілих чисел, розділених косою рисою. Перше число задає ширину в пікселях, а друге число задає висоту в пікселях.

@media all and (min-device-aspect-ratio: 16/9) {...}

pixel-ratio

Крім медіа-функції aspect-ratio є також функція pixel-ratio. Вона включає функцію device-pixel-ratio, також з префіксами min і max. Зокрема, ця функція відмінно підходить для визначення пристроїв високої чіткості, в тому числі дисплеїв ретина. Медіа-запит для цього виглядає наступним чином.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}

resolution

Медіа-функція resolution визначає здатність пристрою виведення у вигляді щільності пікселів, також відомої як число точок на дюйм або DPI. Функція resolution також приймає префікси min і max. Крім того, функція resolution приймає число точок на піксель (1.3dppx), точок на сантиметр (118dpcm) та інші розміри на основі значень дозволу.

@media print and (min-resolution: 300dpi) {...}

Інші медіа-функції

Інші функції включають в себе визначення доступних вихідних квітів з допомогою color, color-index і monochrome, виявлення растрових пристроїв через функцію grid, а також визначення процесу сканування телевізора функцією scan. Ці функції менш поширені, але настільки ж корисні при необхідності.

Підтримка медіа-запитів в браузерах

На жаль медіа-запити не працюють в Internet Explorer 8 і нижче, а також інших застарілих браузерах. Є, однак, пара відповідних милиць написаних на JavaScript.

Respond.js являє собою полегшений милицю, він шукає тільки min / max-width і повинен ідеально підходити там, де використовуються тільки ці медіа-запити. CSS3-MediaQueries.js більш розвинений і важче, і пропонує підтримку більш широкого безлічі більш складних медіа-запитів. Крім того, майте на увазі, що будь-який милицю може мати проблеми з продуктивністю і потенційно сповільнити сайти. Переконайтеся, що будь-який подібний милицю заслуговує зниження продуктивності.

Демонстрація медіа-запитів

Використовуючи медіа-запити ми зараз перепишемо гнучкі макети, які побудували раніше. Одна з поточних проблем в демонстрації з'являється, коли ширина <aside> стає безуспішно маленької на невеликих екранах. Додавши медіа-запит для області перегляду нижче 420 пікселів в ширину, ми можемо змінити макет, відключивши float і змінивши ширину <section> і <aside>.

@media all and (max-width: 420px) {section, aside {float: none; width: auto; }}

@media all and (max-width: 420px) {section, aside {float: none;  width: auto;  }}

Мал. 4.02. Без будь-яких медіа-запитів <section> і <aside> стають занадто вузькими. Можливо, навіть занадто, щоб утримувати будь-який реальний контент.

Можливо, навіть занадто, щоб утримувати будь-який реальний контент

Мал. 4.03. За допомогою медіа-запитів ми прибираємо float і міняємо ширину <section> і <aside>. Тепер вони займають всю ширину області перегляду, додаючи вільний простір існуючого вмісту.

Визначення контрольних точок

Ваш інстинкт може підказати писати контрольні точки в медіа-запитах грунтуючись на основних розмірах області перегляду, як це визначено різними дозволами пристроїв, таких як 320px, 480px, 768px, 1024px, 1224px і т. Д. Це погана ідея.

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

Крім того, весь цей час виходять нові пристрої і дозволу. Спроба йти в ногу з цими змінами це нескінченний процес.

спочатку мобільні

Один з популярних методів використання медіа-запитів називається «спочатку мобільні». даний підхід включає в себе використання стилів, орієнтованих на більш дрібні екрани як стилі за замовчуванням для сайту, а потім використання медіа-запитів, щоб додати стилі в міру зростання екрану.

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

Підхід «спочатку мобільні» також враховує в дизайні обмеження мобільного користувача. В недалекому майбутньому більшість інтернет-з'єднань буде зроблено на мобільних пристроях. План полягає в тому, що для цього відповідно і розвивати важливий мобільний досвід.

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

/ * Спершу стилі за замовчуванням, потім медіа-запити * / @media screen and (min-width: 400px) {...} @media screen and (min-width: 600px) {...} @media screen and ( min-width: 1000px) {...} @media screen and (min-width: 1400px) {...}

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

/ * Стилі за замовчуванню * / body {background: #ddd; } / * Стилі для великих прістроїв * / @media screen and (min-width: 800px) {body {background-image: url ( "bg.png") 50% 50% no-repeat; }}

демонстрація

Додавши медіа-запити до нашого попереднього прикладу, ми перепишемо кілька стилів, щоб макет виглядав краще на екранах менше 420 пікселів в ширину. Переписуючи цей код, ми спочатку додамо мобільні стилі за замовчуванням, потім медіа-запити для настройки екранів з шириною більше 420 пікселів, в такий спосіб:

section, aside {margin: 1.858736059%; } @Media all and (min-width: 420px) {.container {max-width: 538px; } Section {float: left; width: 63.197026%; } Aside {float: right; width: 29.3680297%; }}

спочатку мобільні

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

viewport

Мобільні пристрої в наші дні, як правило, досить пристойно виконують роботу по відображенню сайтів. Іноді їм може знадобитися невелика допомога, пов'язана, зокрема, з визначенням розміру області перегляду , Масштабуванням і дозволом сайту. Щоб виправити це, Apple впровадив метатег viewport.

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

Висота і ширина області перегляду

Використання метатега viewport зі значеннями height або width визначатиме, відповідно, висоту або ширину області перегляду. Кожне значення приймає або позитивне ціле число, або ключове слово. Для властивості height приймається ключове слово device-height, а для властивості width приймається ключове слово device-width. За допомогою цих ключових слів буде успадковуватися ширина і висота пристрою за умовчанням.

Для досягнення найкращих результатів і красиво виглядає сайту рекомендується використовувати значення пристрою за умовчанням шляхом застосування device-height і device-width.

<Meta name = "viewport" content = "width = device-width">

Мал. 4.05. Дозволивши пристроїв дізнатися передбачувану ширину сайту, device-width в даному випадку, це дозволило сайту прийняти правильний розмір і підібрати будь-які точні медіа-запити.

Масштабування області перегляду

Для управління масштабуванням сайту на мобільному пристрої і наскільки користувачі можуть його масштабувати, застосовуються властивості minimum-scale, maximum-scale, initial-scale і user-scalable.

initial-scale для сайту має бути встановлений в 1, так як це визначає співвідношення між висотою пристрою в портретній орієнтації і розміром області перегляду. Якщо Ви знаходитесь в альбомному режимі, то це буде співвідношення між шириною пристрою і розміром області перегляду. Значним initial-scale завжди має бути позитивне ціле число від 0 до 10.

<Meta name = "viewport" content = "initial-scale = 2">

Мал. 4.06. Використання цілого числа більше 1 буде збільшити сайт більше, ніж масштаб за замовчуванням. Взагалі кажучи, це значення найбільш часто встановлюється в 1.

Значення minimum-scale і maximum-scale визначають, наскільки область перегляду може масштабироваться в меншу і більшу сторони. При використанні minimum-scale значення має бути позитивним цілим числом менше або рівним initial-scale. Використовуючи ті ж міркування, значення maximum-scale має бути позитивним цілим числом більше або рівним initial-scale. Обидва значення також повинні бути від 0 до 10.

<Meta name = "viewport" content = "minimum-scale = 0">

Взагалі кажучи, ці значення не повинні бути встановлені на те ж значення, що і initial-scale. Це дозволить відключити будь-масштабування, яке може бути виконане натомість застосування значення user-scalable. Установка значення user-scalable в no відключить будь масштабування. В якості альтернативи, встановивши значення user-scalable в yes ми включимо масштабування.

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

<Meta name = "viewport" content = "user-scalable = yes">

Дозвіл області перегляду

Даючи браузеру вирішувати, як масштабувати сайт грунтуючись на будь-яких значень масштабу області перегляду, зазвичай роблять один трюк. Коли потрібно більше контролю, зокрема, над вирішенням пристрої, може бути використано значення target-densitydpi. target-densitydpi приймає кілька значень, включаючи device-dpi, high-dpi, medium-dpi, low-dpi або конкретне число точок на дюйм.

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

<Meta name = "viewport" content = "target-densitydpi = device-dpi">

комбінація значень

Метатег viewport приймає окремі значення поряд з безліччю значень, дозволяючи встановити кілька властивостей за раз. Установка декількох значень вимагає поділу запитом в значенні атрибута content. Одне з рекомендованих значень наведено нижче, в якому використовуються властивості width і initial-scale.

<Meta name = "viewport" content = "width = device-width, initial-scale = 1">

<Meta name = viewport content = width = device-width, initial-scale = 1>

Мал. 4.07. Комбінація width = device-width і initial-scale = 1 забезпечує початковий розмір і необхідну масштабування.

правило @viewport

Оскільки мета-тег viewport обертається переважно навколо установки стилів, які визначають як повинен відображатися сайт, то рекомендуємо перемістити його з HTML в правило @viewport в CSS. Це допомагає зберегти стиль окремо від змісту, забезпечуючи більш семантичний підхід.

В даний час в деяких браузерах вже реалізовано правило @viewport, проте підтримка не так повсюдна. Раніше рекомендований метатег viewport буде виглядати наступним правилом в CSS.

@viewport {width: device-width; zoom: 1; }

Гнучкий медіа-контент

Останній, але не менш важливий аспект чуйного веб-дизайну включає гнучкий медіа-контент. Коли починає змінюватися область перегляду, медіа-контент не завжди під це підлаштовується. Зображення, відео та інший медіа-контент повинен бути масштабованим, змінюючи свій розмір при зміні розміру області перегляду.

Швидкий спосіб зробити медіа-контент масштабується - це використовувати властивість max-width зі значенням 100%. Це гарантує, що при зменшенні області перегляду будь-медіа-контент будуть зменшуватися відповідно до ширини контейнерів.

img, video, canvas {max-width: 100%; }

Демонстрація гнучких зображень

Вбудовування гнучкого медіа-контенту

На жаль, властивість max-width не дуже добре працює для всіх випадків медіа-контенту, зокрема, для <iframe> і вбудованого медіа-контенту. Коли справа доходить до зовнішніх сайтів на кшталт YouTube, які використовують <iframe> для вбудованого медіа-контенту, це величезне розчарування. На щастя, є рішення .

Щоб вбудовується медіа-контент був повністю чуйним, елемент повинен бути позиціонується абсолютно в батьківському елементі. У батька width повинен бути 100%, щоб він міг масштабироваться, грунтуючись на ширині області перегляду. Батьківський елемент також повинен мати height рівний 0, щоб включити механізм hasLayout в Internet Explorer.

Потім додаємо padding знизу батьківського елемента, значення якого встановлюється таким же, що і співвідношення сторін відео. Це дозволяє висоті батьківського елемента бути пропорційною його ширині. Пам'ятайте формулу гнучкого макета? Якщо у відео співвідношення сторін 16: 9, то 9 розділити на 16 буде .5625, таким чином потрібно нижній padding рівний 56.25%. padding знизу, а не зверху використовується спеціально для запобігання Internet Explorer 5.5 від поломки і лікування батьківського елемента, як абсолютно позиціонованого.

HTML

<Figure> <iframe src = "https://www.youtube.com/embed/4Fqg43ozz7A"> </ iframe> </ figure>

CSS

figure {height: 0; padding-bottom: 56.25%; / * 16: 9 * / position: relative; width: 100%; } Iframe {height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

Демонстрація гнучкого відео

Ресурси і посилання

Автор і редактори

Автор: Шей Хоу

Остання зміна: 11.08.2018

Редактори: Влад Мержевіч

Пам'ятайте формулу гнучкого макета?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: