Главная » Руководство по HTML – HTML5 введение » Адаптивный веб-дизайн HTML

Адаптивный веб-дизайн HTML

Адаптивный или как его еще называют - "отзывчивый" веб-дизайн — это дизайн макета веб-страниц, который хорошо выглядит на всех устройствах!

Адаптивный веб-дизайн будет автоматически подстраиваться под разные размеры экрана и области просмотра.

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

Отзывчивый веб-дизайн — это использование HTML и CSS для автоматического изменения размера, скрытия, уменьшения или увеличения веб-сайта, чтобы он хорошо выглядел на всех устройствах (настольных компьютерах, планшетах и телефонах) и был удобен для пользователей:

ПРИМЕР

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
 float: left;
 width: 20%;
}
.menuitem {
   padding: 8px;
   margin-top: 7px;
   border-bottom: 1px solid #294363;
}
.main {
   background-color: #294363;
   color: #fff;
   float: left;
   width: 60%;
   padding: 0 20px;
   margin-top: 7px;
   overflow: hidden;
}
.right {
   background-color: #05162e;
   color: #fff;
   float: left;
   width: 20%;
   padding: 10px 15px;
   margin-top: 7px;
}
@media only screen and (max-width:820px) {
 /* Для планшетов: */
 .main {
  width: 80%;
  padding: 10px 15px;
 }
.right {
   width: 100%;
 }
}
@media only screen and (max-width:500px) {
 /* Для мобильных телефонов: */
 .menu, .main, .right {
    width: 100%;
 }
}
</style>
</head>
<body style="font-family:Verdana;">

<div style="background-color:#05162e;color:#fff;padding:15px;">
  <h1>Разработка Веб-Сайтов</h1>
  <h3>Измените размера окна браузера, чтобы увидеть эффект.</h3>
</div>

<div style="overflow:auto">
 <div class="menu">
  <div class="menuitem">HTML</div>
  <div class="menuitem">CSS</div>
  <div class="menuitem">JavaScript</div>
  <div class="menuitem">О Нас</div>
 </div>

 <div class="main">
  <h2>HTML</h2>
  <p>HTML ( The HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц.</p>
  <img src="/htm/workplace.png" style="width:100%">
  <p>Рабочее место (изображение с сайта appnet.club).</p>
 </div>

 <div class="right">
  <h2>HTML</h2>
  <p>HTML легко выучить - вам понравится!</p>
  <h2>Где?</h2>
  <p>На веб-сайте AppNet.Club вы найдете всю необходимую информацию чтобы создать свой первый, собственный веб-сайт.</p>
  <h2>Прайс?</h2>
  <p>Бесплатно!</p>
 </div>
</div>

<div style="background-color:#294363;color:#fff;text-align:center;padding:10px;margin-top:7px;font-size:12px;">Эта веб-страница представляет собой удивительную возможность легкого, адаптивного веб-дизайна, сделанной appnet.club. Измените размер окна, чтобы увидеть как содержимое реагирует на изменение размера. </div>
</body>
</html>

Настройка Viewport

Чтобы создать адаптивный веб-сайт, добавьте следующий тег <meta> на все свои веб-страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Эта настройка установит область просмотра вашей страницы, которая даст браузеру инструкции о том, как управлять размерами и масштабированием страницы.

Пример веб-страниц без метатега viewport и тех же веб-страниц с метатегом viewport:

Без метатега viewport	С метатегом viewport

★ Примечание: если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на картинки выше, чтобы увидеть разницу.

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

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

Использование CSS свойства width

Если для свойства CSS width установлено значение 100%, изображение будет адаптивным и масштабироваться вверх и вниз:

<img src="/htm/workplace.png" style="width:100%;">

★ Примечание: обратите внимание, что в приведенном выше примере изображение можно увеличить, чтобы оно стало больше исходного размера. Во многих случаях лучшим решением будет использование свойства max-width.

Использование свойства max-width

Если для свойства max-width установлено значение 100%, изображение будет уменьшаться, если это необходимо, но никогда не будет увеличиваться в размерах, превышающего исходный:

<img src="/htm/workplace.png" style="width:100%; height:auto;">

Разные изображения в зависимости от ширины браузера

HTML-элемент <picture> позволяет определять разные изображения для разных размеров окна браузера.

Измените размер окна браузера, чтобы увидеть, как изображение ниже меняется в зависимости от ширины:

Белка

<picture>
<source srcset="/htm/Squirrel_sm.png" media="(max-width: 600px)">
<source srcset="/htm/Squirrel_img.png" media="(max-width: 1500px)">
<source srcset="/htm/Squirrel.png">
<img src="/htm/Squirrel_sm.png" alt="Белка" style="width:auto;">
</picture>

Адаптивный размер текста

Размер текста можно задать с помощью единицы измерения "vw", что означает "ширину окна просмотра".

Таким образом, размер текста будет соответствовать размеру окна браузера:

Привет Мир!

Измените размер окна браузера, чтобы увидеть, как масштабируется текст...

<h3 style="font-size: 6vw;">Привет Мир!</h3>

★ Примечание: Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.

Медиа - запросы

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

С помощью медиа-запросов вы можете определить совершенно разные стили для разных размеров браузера.

Измените размер окна браузера, чтобы увидеть, что три элемента div ниже будут отображаться горизонтально на больших экранах и располагаться вертикально на маленьких экранах:

ПРИМЕР

<style>
.left, .right {
  float: left;
  width: 25%; /* Ширина по умолчанию 25% */
}
.main {
  float: left;
  width: 50%; /* Ширина по умолчанию 50% */
}

/* Используйте медиа-запрос, чтобы добавить паузу на 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
  width: 100%; /* Ширина равна 100%, когда окно просмотра 800 пикселей или меньше */
 }
}
</style>

Адаптивная веб-страница — полный пример

Адаптивная веб-страница должна хорошо выглядеть на больших экранах компьютеров и на небольших мобильных телефонах.

ПРИМЕР

 <!DOCTYPE html>
<html>
<head>
<title>Демо адаптивная веб-страница HTML</title>
<meta charset="utf-8">
<meta name="description" content="Это пример адаптивной веб страницы в HTML - AppNet.Club">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
   float: left;
   width: 20%;
   text-align: center;
}
.menu a {
   background-color: #f8f8fd;
   color: 000000;
   padding: 8px;
   margin-top: 7px;
   display: block;
   width: 100%;
}
.main {
   float: left;
   width: 60%;
   padding: 0 20px;
}
.right {
   background-color: #800065;
   color: #ffffff;
   float: left;
   width: 20%;
   padding: 15px;
   margin-top: 7px;
   text-align: center;
}
@media only screen and (max-width: 620px) {
/* Для смартфонов: */
.menu, .main, .right {
   width: 100%;
 }
}
</style>
</head>
 
<body style="font-family:Verdana;color:#000000;">

<div style="background-color:#000080;color:#ffffff;padding:15px;text-align:center;">
   <h1>Привет Мир!</h1>
</div>

<div style="overflow:auto">
 <div class="menu">
   <a href="#">Ссылка 1</a>
   <a href="#">Ссылка 2</a>
   <a href="#">Ссылка 3</a>
   <a href="#">Ссылка 4</a>
</div>

<div class="main">
   <h2>Lorum Ipsum</h2>

<picture> 
   <source srcset="/htm/Squirrel_sm.png" media="(max-width: 600px)"> 
   <source srcset="/htm/Squirrel_img.png" media="(max-width: 1500px)"> 
   <source srcset="/htm/Squirrel.png"> 
   <img style="max-width:100%;" src="/htm/Squirrel_sm.png" alt="Белка"> 
</picture>
    
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<div class="right">
   <h2>О Нас</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div style="background-color:#800065;color:#ffffff;text-align:center;padding:10px;margin-top:7px;">© copyright appnet.club</div>
</body>
</html>

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

Все популярные CSS-фреймворки предлагают адаптивный дизайн.

Они бесплатны и просты в использовании.

W3.CSS фреймворк

W3.CSS — это современная структура CSS с поддержкой дизайна для настольных компьютеров, планшетов и мобильных устройств по умолчанию.
W3.CSS меньше и быстрее, чем аналогичные CSS-фреймворки.
W3.CSS спроектирован так, чтобы быть независимым от jQuery или любой другой библиотеки JavaScript.

ПРИМЕР

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

<div class="w3-container w3-green">
   <h1>Демонстрация фреймворка W3.CSS</h1> 
   <p>Это адаптивная страница, измените размер окна браузера, чтобы увидеть эффект!</p>
</div>

<div class="w3-row-padding">
 <div class="w3-third">
   <h2>HTML</h2>
   <p>HTML ( The HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц.</p>
   <p>С HTML вы можете создать свой собственный веб-сайт, для любых целей.</p>
</div>

<div class="w3-third">
   <h2>CSS</h2>
   <p>CSS - "Cascading Style Sheets" что в переводе означает каскадные таблицы стилей.</p>
   <p>CSS может управлять макетом нескольких веб-страниц одновременно.</p>
</div>

<div class="w3-third">
   <h2>JavaScript</h2>
   <p>JavaScript — самый популярный в мире язык программирования.</p>
   <p>JavaScript делает HTML-страницы более динамичными и интерактивными.</p>
 </div>
</div>

</body>
</html>

🔗 Полностью изучить возможности фреймворка можно на сайте - w3schools.com, по ссылке - W3.CSS (язык английский).

Bootstrap фреймворк

Еще один популярный CSS-фреймворк — Bootstrap:

ПРИМЕР

<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Демонстрация фреймворка Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>Демонстрация фреймворка Bootstrap</h1>
    <p>Это адаптивная страница, измените размер окна браузера, чтобы увидеть эффект!</p>
</div>

   <div class="container mt-5">
  <div class="row">
<div class="col-sm-4">
    <h3>HTML</h3>
    <p>HTML ( The HyperText Markup Language) — это стандартный язык разметки для создания веб-страниц.</p>
    <p>С HTML вы можете создать свой собственный веб-сайт.</p>
</div>
   
   <div class="col-sm-4">
     <h3>CSS</h3>
     <p>CSS - "Cascading Style Sheets" что в переводе означает каскадные таблицы стилей.</p>
     <p>CSS может управлять макетом нескольких веб-страниц одновременно.</p>
</div>
   
   <div class="col-sm-4">
    <h2>JavaScript</h2>
    <p>JavaScript — самый популярный в мире язык программирования.</p>
    <p>JavaScript делает HTML-страницы более динамичными и интерактивными.</p>
  </div>
 </div>
</div>

</body>
</html>

🔗 Изучить полностью фреймворк Bootstrap вы можете на сайте - getbootstrap.com (язык английский).

☛ Элементы компьютерного кода HTML

Элементы и методы разметки HTML ☚

Поделиться ссылкой