Урок №27. HTML. Адаптивний веб-дизайн

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Responsive

Що таке адаптивний веб-дизайн?

Адаптивний веб-дизайн - це використання HTML і CSS для можливості автоматичної зміни розміру, приховування, зменшення або збільшення веб-сторінки, щоб вона виглядала добре на всіх пристроях (настільних комп'ютерах, планшетах і смартфонах):

Спробуйте самі! »

Примітка: Веб-сторінка повинна добре виглядати на будь-якому пристрої!


Встановлення вікна перегляду - значення viewport

Створюючи адаптивні веб-сторінки, додайте наступний елемент <meta> у всі веб-сторінки:

Приклад:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Спробуйте самі! »

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

Нижче наведено приклад веб-сторінки без метатега viewport та тієї ж веб-сторінки з метатегом viewport:

Примітка: Якщо ви переглядаєте цю сторінку за допомогою телефону або планшета, можна натиснути два посилання нижче, щоб побачити різницю (в іншому вікні).


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

Адаптивними зображеннями є зображення, які файно розміщуються на веб-сторінці при будь-якому розмірі вікна веб-браузера.

Використання властивості width

Якщо CSS властивість width (ширина) встановлена на 100%, зображення буде реагувати та масштабуватись, зменшуючись або збільшуючись:

Girl

Приклад:

<img src="img_girl.jpg" style="width:100%;">
Спробуйте самі! »

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

Використання властивості max-width

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

Girl

Приклад:

<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Спробуйте самі! »

Відображення різних зображень залежно від ширини вікна браузера

HTML елемент <picture> дозволяє визначати різні зображення для різних розмірів вікна браузера.

Змініть розмір вікна веб-браузера, щоб побачити, як змінюється зображення в залежності від розміру вікна браузера:

Flowers

Приклад:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>
Спробуйте самі! »

Адаптивний розмір тексту

Розмір тексту можна встановити за допомогою модуля "vw", що означає "viewport width" (ширина вікна перегляду). Таким чином, розмір тексту буде відповідати розміру вікна веб-браузера.

Hello World

Змініть розмір вікна браузера, щоб побачити розмір тексту.

Приклад:

<h2 style="font-size:10vw">Hello World</h2>
Спробуйте самі! »

Примітка: Viewport - це розмір вікна браузера. 1vw = 1% від ширини вікна перегляду. Якщо область перегляду становить 50 см, 1vw - 0,5 см.


Медіа запити

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

Приклад: змініть розмір вікна веб-браузера, щоб побачити, що три елемента div нижче відображатимуться горизонтально на великих екранах і будуть розташовуватися вертикально на невеликих екранах:

Main Content


Right Content


Приклад:

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
 
}
}
</style>
Спробуйте самі! »

Примітка: Щоб дізнатися більше про медіа запити та адаптивний веб-дизайн, прочитайте Підручник з RWD (Responsive Web Design/Адаптивний веб-дизайн).


Адаптивна веб-сторінка - повний приклад

Адаптивна веб-сторінка повинна добре виглядати як на великих екранах стаціонарних комп'ютерів, так і на невеликих мобільних телефонах.

Hello World

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

© copyright w3schools.com
Спробуйте самі! »

Адаптивний веб-дизайн - фреймворки

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


Використання W3.CSS

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

W3.CSS Demo

Змініть розмір вікна сторінки, щоб побачити адаптивність!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Приклад:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>
Спробуйте самі! »

Примітка: Дізнатися більше про фреймворк W3.CSS можна в Підручнику W3.CSS.


Bootstrap

Інший популярний фреймворк - Bootstrap, він використовує HTML, CSS і jQuery для створення адаптивних веб-сторінок.

Приклад:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
 </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
     ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
Спробуйте самі! »

Примітка: Дізнатися більше про фреймворк Bootstrap можна в Підручнику Bootstrap.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.