HTML Адаптивний веб-дизайн
Що таке адаптивний веб-дизайн?
Адаптивний веб-дизайн - це використання HTML і CSS для автоматичної зміни розміру, приховування, стиснення або збільшення веб-сайту, щоб він добре виглядав на всіх пристроях (настільних комп'ютерах, планшетах і телефонах):
Примітка: Веб-сторінка має добре виглядати на будь-яких пристроях!
Налаштування області перегляду (viewport)
При створенні адаптивних веб-сторінок додайте наступний елемент <meta> на всі свої веб-сторінки:
Це встановить область перегляду вашої сторінки, яка дасть браузеру інструкції про те, як управляти розмірами і масштабуванням сторінки.
Нижче наведено приклад веб-сторінки без метатега viewport і тієї ж веб-сторінки із метатегом viewport:
Порада: Якщо ви переглядаєте цю сторінку на телефоні або планшеті, ви можете натиснути на два посилання вище, щоб побачити різницю.
Адаптивні зображення
Адаптивні зображення - це зображення, які добре масштабуються під будь-який розмір браузера.
Використання властивості width (ширина)
Якщо CSS властивість width встановлено на 100%, зображення буде адаптивним і масштабується (розтягується) вгору і вниз:
Зверніть увагу, що в наведеному вище прикладі зображення можна збільшити до розміру, що перевищує його вихідний розмір. У багатьох випадках кращим рішенням буде використання властивості max-width (максимальна ширина).
Використання властивості max-width
Якщо властивість max-width встановлено на 100%, зображення буде зменшуватися, якщо це необхідно, але ніколи не буде збільшуватися до розміру, що перевищує його вихідний розмір:
Показувати різні зображення в залежності від ширини браузера
HTML елемент <picture> дозволяє визначати різні зображення для різних розмірів вікна браузера.
Змініть розмір вікна браузера, щоб побачити, як зображення нижче змінюється в залежності від ширини:
Приклад
<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="Квіти">
</picture>
Спробуйте самі »
Адаптивний розмір тексту
Розмір тексту може бути встановлений за допомогою "vw" одиниці, що означає "viewport width" (ширина області перегляду).
Таким чином, розмір тексту буде відповідати розміру вікна браузера:
Hello World
Змініть розмір вікна браузера, щоб побачити, як масштабується розмір тексту.
Вікно перегляду - це розмір вікна браузера. 1vw = 1% ширини області перегляду. Якщо ширина вікна складає 50 см, 1vw - 0,5 см.
Медіа запити
Крім зміни розміру тексту та зображень, на адаптивних веб-сторінках також часто використовуються медіазапити.
За допомогою медіазапитів ви можете визначити абсолютно різні стилі для різних розмірів браузера.
Приклад: змініть розмір вікна браузера, щоб побачити, що три наведених нижче елемента div будуть відображатися горизонтально на великих екранах і розташовуватися вертикально на маленьких екранах:
Приклад
<style>
.left, .right {
float: left;
width: 20%; /* Ширина 20%, за умовчанням */
}
.main {
float: left;
width: 60%; /* Ширина 60%, за умовчанням */
}
/* Використовуйте медіа-запит, щоб додати точку переходу на 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* Ширина складає 100%, коли область перегляду складає 800 пікселів або менше */
}
}
</style>
Спробуйте самі »
Порада: Щоб дізнатися більше про медіазапити і адаптивний веб-дизайн, прочитайте RWD Підручник на нашому сайті W3Schools українською.
Адаптивна веб-сторінка - Повний приклад
Адаптивна веб-сторінка повинна добре виглядати на великих екранах настільних комп'ютерів і на невеликих мобільних телефонах.
Адаптивний веб-дизайн - фреймворки
Є досить багато CSS-фреймворків, які пропонують адаптивний веб-дизайн.
Вони безкоштовні і прості у використанні.
Використання фреймворку W3.CSS
Відмінним способом створення адаптивного дизайну є використання адаптивної таблиці стилів, наприклад W3.CSS.
W3.CSS дозволяє легко створювати сайти, які виглядають красиво в будь-якому розмірі: на екранах настільного комп'ютера, ноутбука, планшета або телефону:
W3.CSS Демо
Змініть розмір сторінки, щоб побачити адаптивність!
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 Підручник на нашому сайті W3Schools українською.
Фреймворк Bootstrap
Інший популярний фреймворк - Bootstrap, він використовує HTML, CSS і jQuery для створення адаптивних веб-сторінок.
Приклад
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Приклад</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>Моя перша Bootstrap сторінка</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 Підручники на нашому сайті W3Schools українською.
