Як зробити адаптивний сайт: дизайн та верстка під різні дозволи екрану

Адаптивна верстка сайту або RWD – розробка програмного коду, який забезпечує автоматичну трансформацію web-page залежно від гаджета. Всі елементи ресурсу динамічно підлаштовуються під розміри будь-якого пристрою та браузерного вікна – у результаті виходить цілісна структура одному домені, позитивно впливає просування. Дізнаємося, як зробити адаптивний сайт на Html та CSS.

Як адаптувати сайт під різні роздільні здатності екрану

Особливості RWD сайту або лендінгу - це відсутність горизонтального прокручування і областей, що масштабуються. Тому головним завданням верстки є створення універсального шаблону, здатного адаптуватися до різних пристроїв одночасно. Перший етап верстки розпочинається з головної сторінки сайту. Як і за будь-якої верстки, формуються основні блоки – хедер, боді та футер. Але всі ці три елементи повинні відображатися на екрані максимально можливому обсязі, без нижнього колонтитулу. На скрині нижче приклад формування шапки, коли основний контейнер та сітка зафіксовані за допомогою значень px. Далі збільшується кількість елементів, що відображаються - бічні віджети, медіа-запити, стилі і т. д. Конкретно все залежить від специфіки сайту і його завдань.

Переваги адаптивного сайту

• економія часу та сил – інакше довелося б створювати та просувати окремі версії сайту;
• покращення SEO – кожна сторінка сайту має один урл, без редиректів на десктопну або мобільну версію;
• збільшення показів у звітах Google Аналітікс та Метриці – за рахунок синхронізації запитів з робочого столу та мобільних пристроїв;
• спрощення робіт по сайту – за потреби досить модифікувати базові CSS-стилі.

Але не все так райдужно – адаптивна верстка має свої недоліки:

• погана якість зображень у мобільній версії – доводиться використовувати обхідні рішення, такі як Sencha або Adaptive Images;
• складність розробки – потрібні навички досвідченого верстальника.

Увага! Адаптивна верстка не страждає через велику кількість CSS-стилів та JavaScript файлів. Вона не показує зменшених копій сайту як чуйний (респонсивний) веб-дизайн – просто сервер розпізнає тип гаджета користувача та відображає полегшену версію блогу. Можна порівняти із Турбо сторінками Яндексами.

Як зробити адаптивний дизайн сайту

Придбати адаптивний дизайн можна кількома способами:

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

2. Купити готовий шаблон. Багато дизайнерів виставляють свої роботи на продаж - наприклад, у репозитарій WordPress або Simbla. Правда, такий дизайн не буде ексклюзивом, але якщо розумієтеся на коді, то можна внести деякі правки і унікалізовані шаблон. Можна також створити такий сайт на якомусь конструкторі.

3. Створити на фреймворку. Це готовий каркас шаблону з усіма основними для адаптивної верстки файлами та сіткою. Ними часто користуються дизайнери, щоб заощадити час. Серед популярних фреймворків: Bootstrap, Tailwind, Material-UI та інші. Докладніше про html та css framework розповімо наприкінці статті.

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

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

Що таке адаптивна верстка для сайту

8 обов'язкових правил RWD:

1. Поточність. Має на увазі зміщення та вибудовування блоків на сайті один під одним під час перегляду з мобільних пристроїв.
2. Відносність ЄІ. Одиниці вимірювання у такій верстці змінюються залежно від пристрою. Розміри, масштаби та координати задаються щодо елемента – наприклад, по верхній межі.
3. Контрольні точки. Обов'язковий принцип адаптивної верстки, коли крапка фіксує вміст сторінки і не дає йому "повзати" за межі екрана.
4. Min/Max кордону. Ці властивості дозволяють налаштувати верстку так, щоб не було розтягнутості.
5. вкладеність. Коли елементів багато, їх поміщають в один контейнер, щоб легше було здійснювати контроль над об'єктами. Це стосується кнопок, логотипів та інших елементів, які не потрібно адаптувати під налаштування екранів.
6. Легкі шрифти. Вони повинні мати малу вагу, інакше сторінка довго завантажуватиметься.
7. Комбінування растрової та векторної графіки. Стиснуті векторні зображення підтримують не всі браузери.
8. Медіа-запити. Без них неможливо уявити адаптивну верстку. Саме за media queries застосовуються умови для кожного типу пристрою.

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

Як зробити адаптивну верстку сайту за допомогою HTML та CSS

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

Налаштування viewport

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

Тут видно, що команда width підлаштовує сторінку під екран конкретного гаджета, і масштабування визначається автоматично. Коефіцієнт збільшення/зменшення визначає параметр initial-scale.

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

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

І набагато складніше, якщо сайт діючий – тоді доведеться повозитися і додати всі необхідні елементи.

Приклади використання медіа-запитів:

1. Задаємо min-width в 990px.

2. Задаємо ширину 1200px.

3. Встановлюємо максимальну ширину зображення.

Створення стилів для різних роздільних здатностей екрану

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

Тепер про стилі під окремі дозволи. Рекомендуємо підготувати кілька файлів CSS, кожен з яких містить окремі розміри для різних моніторів.

Далі за допомогою link додаємо ще 2 файли: small.css і big.css. І робимо так, щоб користувач сам вибрав, який масштаб йому підходить.

Залишається підключити скрипт, який перемикатиме файл стилів.

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

Адаптивні зображення та розміри шрифтів

Такі картинки добре масштабуються, тому відповідають будь-якому розміру браузера. Вище ми показали, як задати їм ширину за допомогою медіа-запитів - ставимо 100% від екрану користувача.

Щодо шрифтів, то зробити їх адаптивними можна за допомогою параметра vw – ширини видового екрану. 1vw дорівнює 1% від ширини видового екрану. oot

HTML та CSS-фреймворки для створення адаптивної верстки

Як і обіцяли, перерахуємо популярні фреймворки для створення адаптивної верстки сайту. Грубо кажучи, це послуги з набором шаблонів розмітки, CSS таблиць та JS скриптів.

1. Bootstrap. Сервіс від Twitter надає усі необхідні інструменти для розробки mobile-friendly – ​​різноманітні сітки, велику бібліотеку, підтримку відомих браузерів.

2. Foundation. Сервіс від ZURB. Є гумові та адаптивні сітки, бібліотека дещо скромніша, ніж у Bootstrap, але підійде для швидкої розробки.

3. Wirefy. Тут ви знайдете багато адаптивних кадрів, але треба знати html та CSS.

4. FitVids. Невеликий скрипт, який автоматично підбирає потрібний розмір відео залежно від монітора користувача.

5. Adaptive Images. Відмінний фреймворк для створення адаптивних картинок.

Помилки при створенні адаптивної верстки

Нижче про типові помилки, яких припускаються новачки, та способи їх уникнути.

1. Урізаний контент. Наприклад, таке було навіть на Турбо сторінках Яндекса, коли вони ще запустили бета-версію. На мобільних пристроях не відображалися таблиці – вебмайстер повинен сам щось там начарувати в коді, щоб вони з'явилися. Сьогодні цю проблему повністю вирішено.Так ось, не ховайте абсолютно нічого з контенту, якщо він не міститься на маленькому екрані - допрацюйте код. Наприклад, закладіть більше місця для заголовків, простовивши в текстові блоки довгий "рибний" текст.

2. Важкі зображенняШвидкість роботи сайту принципово важлива для власників смартфонів і планшетів. Картинки з великою вагою завантажуються повільно і гальмують серфінг. видачі.

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

4. Поведінкові факториПеред початком сайту з адаптивною версткою, обов'язково з'ясуйте, які дії користувачі робили найчастіше. проводити регулярно та виправляти недоліки.

5. Довжина рядкаКоли верстальник розробляє дизайн по стратегії Mobile First, у нього можуть вийти занадто довгі рядки, так як у мобільних гаджетів вузький екран, і контент зазвичай розташовується в одну колонку, залишаючи невеликі поля. для ПК, на автоматі також розтягує текстовий блок.Щоб цього не сталося, витримуйте стандартні значення довжини рядка до 60-70 символів.

І найголовніше – багато хто робить помилку при тестуванні. Або взагалі його не проводять, або роблять це не до кінця. Обов'язково перевірте специфіку роботи сайту на кількох популярних браузерах - не виключено, що він погано відображатиметься в деяких з них. Це ж стосується функціонування різних ОС – Windows, iOS, Unix тощо. буд.

Приклади адаптивних сайтів

Багато якісних адаптивних сайтів можна побачити у Рунеті. Перерахуємо 5 найпопулярніших ресурсів, а ви самостійно вивчите:

• kommersant.ru;
• l34.news;
• medusa.io;
• alfabank.ru;
• aviasales.ru.

Висновок

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

FAQ

Загальноприйняті розміри: смартфони (320-480 px і вище), планшети (768 px), нетбуки (1024 px і вище), ПК (1280, 1600, 1920 px та вище).

Це спеціальні команди, які задають стилі певних пристроїв. Їх важливо вписати не лише всередині CSS-файлу, а й у HTML.

Використовуючи HTML, CSS та JS. Або без JS, як це описано тут.

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

У безкоштовному розширенні Responsive Viewer. Встановлюєте його в Chrome, перезавантажуєте браузер, відкриваєте сайт і натискаєте на іконку RV.Якщо все зроблено правильно, з'явиться панель адаптивності - відображення сайту відразу на декількох пристроях.

Налаштовуємо Viewport, вписуємо медіа-запити, створюємо стилі та адаптуємо зображення.

Чуйний дизайн

На зорі веб-дизайну сторінки створювалися для екрана певного розміру. Якщо у користувача був екран більшого або меншого розміру, ніж очікував дизайнер, то результат міг бути від небажаних смуг прокручування до занадто довгого рядка і поганого використання простору. Оскільки ставали доступними багато різних розмірів екранів, з'явилася концепція чуйного (адаптивного) веб-дизайну (responsive web design (RWD)) — набір методів, які дозволяють веб-сторінкам змінювати свій макет та зовнішній вигляд відповідно до різної ширини екрана, роздільної здатності тощо. Це та сама, ідея, що змінила підхід до дизайну веб для безлічі пристроїв, і в цій статті ми допоможемо вам зрозуміти основні методи, які вам необхідно знати, щоб освоїти його.

Історичні макети сайтів

У якийсь момент історії при розробці веб-сайту у вас було два варіанти:

• Ви могли створити рідкий сайт, який буде розтягуватися, щоб заповнити вікно браузера
• або сайт з фіксованою шириною, який матиме фіксований розмір у пікселях.

Ці два підходи, як правило, призводили до того, що веб-сайт найкраще виглядав на екрані людини, яка створила сайт! Рідкий сайт приводив до роздавленого дизайну на маленьких екранах (як видно нижче) і не читається довгим рядкам на великих.

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

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

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

Примітка: Скріншоти вище зроблені за допомогою Responsive Design Mode у Firefox DevTools.

Коли мобільний веб став ставати реальністю з першими функціональними телефонами, компанії охочі охопити мобільники почали створювати переважно спеціальні мобільні версії своїх сайтів, з різними URL (часто щось на кшталт m.example.com або example.mobi). Це означало, що необхідно було розробляти та підтримувати в актуальному стані дві окремі версії сайту.

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

Гнучкий макет до чуйного дизайну

Було розроблено кілька підходів, щоб спробувати вирішити недоліки побудови веб-сайтів рідким методом або методом з фіксованою шириною. У 2004 році Камерон Адамс написав пост Resolution dependent layout, що описує метод створення дизайну, який міг би адаптуватися до різних дозволів екрану. Цей підхід вимагав, щоб JavaScript дізнавався про дозвіл екрана і завантажував коректний CSS.

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

Чуйний дизайн

Термін адаптивний дизайн був придуманий Ітаном Маркоттом у 2010 році та описував використання трьох методів у поєднанні.

1. Першою була ідея рідких сіток, що вже досліджувала Гілленвотер, що можна прочитати в статті Маркотта - Fluid Grids (опубліковано в 2009 в A List Apart).
2. Другим способом була ідея рідких зображень. Використовуючи дуже простий метод налаштування властивості max-width на 100%, зображення будуть ставати менше якщо містить стовпець стає вже ніж початковий розмір зображення, але ніколи не стає більше. Це дозволяє зображенню зменшуватися щоб відповідати стовпцю гнучких розмірів, а не перекриватися з ним, але не рости і ставати піксельним, якщо стовпець стає ширшим за зображення.
3. Третім ключовим компонентом були медіавирази. Медіавирази дозволяють перемикати тип макета застосовуючи лише CSS те, що Камерон Адамс досліджував за допомогою JavaScript. Замість того, щоб мати один макет для всіх розмірів екранів, макет міг змінюватися. Бічні панелі можна переміщати для маленьких екранів або відображати альтернативну навігацію.

Дуже важливо зрозуміти, що адаптивний веб-дизайн — це не окрема технологія, це термін використовується, щоб описати підхід до веб-дизайну або набір кращих практик, що використовуються для створення макета, який може реагувати на пристрій для перегляду контенту. У початковому дослідженні Маркотта це означало гнучкі сітки (з використанням floats) та медіавираження, проте майже за 10 років, що минули з моменту написання цієї статті, адаптивна робота стала стандартом за умовчанням. Сучасні методи макета CSS чуйні за своєю суттю, і ми маємо нові штучки, вбудовані в веб-платформу для того, щоб робити дизайн чуйних сайтів простіше.

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

Медіавирази

Чуйний дизайн з'явився завдяки медіавиразам (media queries).Специфікація Media Queries Level 3 стала Рекомендованим Кандидатом у 2009 році, що означає, що вона була визнана готовою до реалізації у браузерах. Медіавирази дозволяють нам проводити серію тестів (наприклад, чи є екран користувача більше, ніж певна ширина або роздільна здатність) і вибірково застосовувати CSS до стилю сторінки відповідно до потреб користувача.

Наприклад, наступне медіавираз перевіряє відображається поточна сторінка як екранна медіа (а не як друкований документ) і чи має область перегляду ширину як мінімум 800 px. CSS буде застосовуватися до селектора .container, тільки якщо ці дві речі істини.

@media screen and (min-width: 800px) < .container < margin: 1em 2em; >>

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

Загальним підходом при використанні медіавиражень є створення простого одноколонкового макета для пристроїв з вузькими екранами (наприклад, мобільні телефони), потім перевірка для великих екранів та застосування макета з кількома стовпцями, коли ви знаєте, що у вас достатньо ширини екрана, щоб вмістити все. Такий підхід часто називають mobile first дизайн.

Дізнатися більше про медіавирази можна в документації MDN.

Гнучкі сітки

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

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

У перші дні чуйного дизайну, нашим єдиним варіантом виконання було використання floats. , створеного з використанням пікселів, у відсотки.

target/context=result

Наприклад, якщо розмір нашого цільового стовпця - 60 пікселів, а контекст (або контейнер) в якому він знаходиться - 960 пікселів, то ми ділимо 60 на 960 щоб отримати значення, яке ми можемо використовувати в нашому CSS, після перенесення десяткової точки вправо на 2 цифри .

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

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

На ширших екранах вони переміщаються у два стовпці:

Примітка: Ви можете знайти живий приклад та вихідний код цього прикладу на GitHub.

Сучасні технології макетів

Сучасні методи макетів такі як Макет з декількома стовпцями, Flexbox, і Grid є чуйними за замовчуванням.

Multicol

Найстаріший з цих методів - це multicol, коли ви задаєте column-count, це відображає те, на скільки стовпців ви хочете розбити ваш контент. Далі браузер розраховує їх розмір, розмір, який зміниться за розміром екрана.

Якщо замість цього ви поставите column-width , то ви визначите мінімальну ширину. Браузер створить стільки стовпців тієї ширини, скільки буде комфортно вміщатися в контейнер, а потім поділить простір, що залишився, між усіма стовпцями. Тому кількість стовпців змінюватиметься відповідно до того, скільки є місця.

Flexbox

У Flexbox, як вихідна поведінка, flex елементи будуть стискатися та розподіляти простір між елементами відповідно до простору у їхньому контейнері. Змінюючи значення flex-grow та flex-shrink ви можете вказати, як ви хочете, щоб предмети поводилися коли вони стикаються з більшим або меншим простором навколо себе.

У прикладі нижче кожен flex елемент прийматиме рівну кількість простору у flex контейнері використовуючи запис flex: 1 як описано в розділі Flexbox: Гнучка зміна розмірів flex елементів.

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

CSS grid

У макеті CSS Grid одиниці виміру fr дозволяють розподіляти доступний простір між доріжками сітки. Наступний приклад створює grid контейнер із трьома доріжками розміром 1fr. Це створить три вертикальні доріжки, кожна займає одну частину вільного простору у контейнері. Ви можете дізнатися більше про цей підхід до створення сітки у темі Вивчення Макета Grid у розділі Гнучкі grids з одиницями fr.

Примітка: Версія grid макета ще простіша, оскільки ми можемо визначити стовпці в .wrapper: приклад, вихідний код.

Чуйні зображення

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

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

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

Чуйна друкарня

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

У цьому прикладі ми хочемо задати нашому заголовку першого рівня 4rem , що означає, що він буде вчетверо більше нашого базового розміру шрифту. Це дуже велике заголовок! Ми хочемо цей гігантський заголовок тільки на екранах великих розмірів, тому ми спочатку створюємо менший заголовок, а потім використовуємо медіавираження, щоб переписати його для великих екранів, якщо ми знаємо, що користувач має екран розміром як мінімум 1200px .

html < font-size: 1em; >h1 < font-size: 2rem; >@media (min-width: 1200px) < h1 < font-size: 4rem; >>

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

У мобільних версіях заголовок менше:

На комп'ютерах, однак, ми бачимо більший заголовок:

Примітка: Дивіться цей приклад у дії: приклад, вихідний код.

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

Використовуючи viewport units for responsive typography

Захоплюючий спосіб використовується для перегляду port unit vw для відповідного відповідного типографіки. 1vw є еквівалентним на один відсоток viewport width, meanning, що якщо ви набираєте вашу площу розміру використовуючи vw , вона буде завжди порівняти до розміру viewport.

Problem s doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of viewport. Theforfor you should never set text using viewport units alone.

Там є рішення, і це встановлює використання calc() . Якщо ви збираєтеся ввійти до значення встановити, використовуючи fixed size such as em s or rem s the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

Це означає, що ми тільки потрібні для особливості font size for heading once, therm than set it up for mobile and redefine it in the media queries. Фонти будуть поступово збільшуватися, як ви збільшуєте розмір viewport.

Примітка: Натисніть на те, що в цьому виконанні: example, source code.

The viewport meta tag

Якщо ви бачите на HTML-коді відповідну сторінку, ви будете завжди бачити, що викладено tag в документі.

Це meta tag tells мобільних браузеров, що вони повинні налаштувати довжину перегляду до пристрою довжини, і клацнути документ на 100% його розширений розмір, який показує документ на мобільно-оптимізованого розміру, який ви встановили.

Why is this needed? Тому мобільні браузери беруться до їхнього viewport width.

Цей meta tag exists because when the original iPhone launched and people started to view website on a small phone screen, most sites were no mobile optimized. Mobile browser would, therefore, налаштувати viewport width to 960 pixels, render the page at that width, і show the result as zoomed-out version of desktop layout. Інші мобільні браузери (e.g. on Google Android) did the same thing. Users можна zoom in and pan around the website to view the bits they were interested in, but it looked bad. Ви будете тримати цей день, якщо ви маєте велике бажання йти на стілець, що ви не має відповідного дизайну.

Проблема полягає в тому, що свій відповідальний дизайн з перешкодами і медичними вимогами, які не працюють на мобільних браузерах. Якщо ви збираєтеся, щоб навантажити екран, щоб зробити, що кицьки в 480px viewport width or less, і viewport is set на 960px, ви не знаєте, як навантажують ручку, щоб завантажити на мобільний. Під час встановлення width=device-width ви є overriding Apple's default width=960px з сучасною width of device, так як ваші media queries буде працювати як intended.

So you should always include the above line of HTML в head of your documents.

Там є інші налаштування, які ви можете використовувати з viewport meta tag, тому що в цілому на line is what you will want to use.

• initial-scale : Натисніть на загальну сторінку, на якій ми будемо встановлювати 1.
• height : Sets a specific height for the viewport.
• minimum-scale : Sets the minimum zoom level.
• maximum-scale : Sets the maximum zoom level.
• user-scalable : Prevents zooming if set to no .

Ви повинні avoid using minimum-scale , maximum-scale , і в особливу настройку user-scalable to no . Users should be allowed to zoom as much or as little as they need to; preventing this causa accessibility problems.

Summary

Responsive design refers to site або application design що відповідають навколишньому середовищу, в якому is viewed. Це обчислює число CSS і HTML рис і технологій і є досить добре, як ми будемо створювати веб-сайти по змозі. Слід зазначити, що ви знайдете на вашому телефоні — це є ймовірно невдовзі необхідним для того, щоб скористатися веб-сайтом, що є робочою версією, що розташована внизу, або де ви потребуєте, щоб скликати заходи до кінця. Це означає, що веб-сайт ведеться до цього способу designing responsively.

Це буде також найкращим чином, щоб досягти відповідних дизайнів з використанням відповідних методів, які ви будете вивчати в цих умовах. Якщо ви є нові для web development, завжди ви можете багато інструментів у вашому розпорядженні тільки в ранніх днях responsive design. Це єзавжди спрацьовуючи війну будь-яких матеріалів, які ви бачите. У той час як історичні сторінки є досить практичним, сучасним використанням CSS і HTML, що робить його на додаток для створення елегантного і надійного дизайну, не мабуть, що пристрій для вашого viewer visitor site with.

page(Doc) not found /uk/docs/Learn/CSS/CSS_layout/Media_queries

In this module

• Introduction to CSS layout
• Normal flow
• Flexbox
• Grid
• Floats
• Positioning
• Multiple-column layout
• Responsive design
• Beginner's guide to media queries
• Legacy layout methods
• Supporting older browsers
• Fundamental layout comprehension assessment