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

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

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

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

Адаптивый веб-дизайн использует HTML и CSS для автоматического изменения размера, скрытия, уменьшения или увеличения веб-сайта, чтобы он хорошо выглядел на всех устройствах (настольных ПК, планшетах и телефонах).

Настройка области просмотра

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

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

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

Вот пример веб-страницы без мета-тега viewport и той же веб-страницы с мета-тегом viewport:

Без тега meta для области просмотра

С тегом meta для области просмотра

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

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

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

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

Пример

<img src="img_girl.jpg" style="width:100%;">

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

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

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

Пример

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Отображение разных изображений в зависимости от ширины браузера

Элемент 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», что означает «ширина области просмотра».

В этом случае размер текста будет изменяться вслед за изменением ширины окна браузера:

Hello World

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

Пример

<h1 style="font-size:10vw">Привет, мир</h1>

Область просмотра — это видимая область окна браузера. 1vw = 1% от ширины области просмотра. Если ширина области просмотра 50 см, то 1vw = 0.5 см.

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

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

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

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

Основной контент

Правый контент

Пример

.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%, когда размер области просмотра 800px или меньше */
  }
}

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

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

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

Bootstrap

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

Bootstrap Demo

Измените размер страницы, чтобы увидеть адаптивность!

Лондон

Лондон — столица Англии.

Это самый густонаселённый город в Великобритании с метрополитенской зоной, насчитывающей более 13 миллионов жителей.

Париж

Париж — столица Франции.

Парижский регион — один из крупнейших населённых пунктов в Европе с населением более 12 миллионов человек.

Токио

Токио — столица Японии.

Это центр Большого Токио и самая густонаселённая метрополитенская зона в мире.

Пример

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Пример Bootstrap 5</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-md-4">
          <h2>Лондон</h2>
          <p>Лондон — столица Англии.</p>
          <p>Это самый густонаселённый город в Великобритании с метрополитенской зоной, насчитывающей более 13 миллионов жителей.</p>
       </div>
       <div class="col-md-4">
          <h2>Париж</h2>
          <p>Париж — столица Франции.</p> 
          <p>Парижский регион — один из крупнейших населённых пунктов в Европе с населением более 12 миллионов человек.</p>
       </div>
       <div class="col-md-4">
          <h2>Токио</h2>
          <p>Токио — столица Японии.</p>
          <p>Это центр Большого Токио и самая густонаселённая метрополитенская зона в мире.</p>
       </div>
    </div>
</div>
</body>
</html>

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>W3Schools Demo</h1>
  <p>Измените размер этой адаптивной страницы!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>Лондон</h2>
    <p>Лондон — столица Англии.</p>
    <p>Это самый густонаселённый город в Великобритании с метрополитенской зоной, насчитывающей более 13 миллионов жителей.</p>
  </div>

  <div class="w3-third">
    <h2>Париж</h2>
    <p>Париж — столица Франции.</p> 
    <p>Парижский регион — один из крупнейших населённых пунктов в Европе с населением более 12 миллионов человек.</p>
  </div>

  <div class="w3-third">
    <h2>Токио</h2>
    <p>Токио — столица Японии.</p>
    <p>Это центр Большого Токио и самая густонаселённая метрополитенская зона в мире.</p>
  </div>
</div>

</body>
</html>