САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Учебник

HTML ГЛАВНАЯ HTML Введение HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML с CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML с JavaScript HTML Путь к Файлу HTML Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML vs. XHTML

HTML Формы

HTML Формы HTML Элементы ввода HTML Типы ввода HTML Атрибуты ввода HTML Атрибты форм ввода

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные Атрибуты HTML Поддержка Браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы Документов HTML Кодировка Символов HTML URL Кодировка HTML Коды Языка HTTP Сообщения HTTP Методы PX в EM Конвертер Клавишные Комбинации

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



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

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

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

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

Попробуйте сами »


Настройка видового экрана

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

Пример

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

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

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

Без мета тега viewport:
С помощью мета тега viewport:

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



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

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

Используя свойство width

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

Пример

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

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

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

Если свойству 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", что означает "ширина видового экрана".

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

Привет мир

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

Пример

<h1 style="font-size:10vw">Привет мир</h1>
Попробуйте сами »

Видовой экран - это размер окна браузера. 1vw = 1% от ширины видового экрана. Если видовое окно имеет ширину 50cm, то 1vw составляет 0.5cm.


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

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

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

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

Основное содержание


Контент справа


Пример

<style>
.left, .right {
  float: left;
  width: 20%; /* Ширина по умолчанию составляет 20% */
}

.main {
  float: left;
  width: 60%; /* Ширина по умолчанию составляет 60% */
}

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

Совет: Чтобы узнать больше о медиа запросах и адаптивном веб дизайне, прочтите раздел RWD Учебник.


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

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

Попробуйте сами »


Адаптивная веб страница - frameworks

Существует множество существующих CSS фреймворков, предлагающих адаптивный дизайн.

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

Используя W3.CSS

Отличный способ создать адаптивный дизайн, использовать адаптивную таблицу стилей, например W3.CSS

W3.CSS позволяет легко разрабатывать сайты, которые хорошо выглядят при любом размере; рабочий стол, ноутбук, планшет или телефон:

W3.CSS демо

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

Лондон

Лондон является столицей Англии.

Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.

Париж

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

В Париже находится один из крупнейших центров населения в Европе, с более чем 12 миллионов жителей.

Токио

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

Это центр большого Токио и самый густонаселенный мегаполис в мире.

Пример

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

<div class="w3-container w3-orange">
  <h1>W3.CSS Демо</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>
Редактор кода »

Чтобы узнать больше о W3.CSS, читайте W3.CSS Учебник.


Bootstrap

Еще один популярный фреймворк Bootstrap, он использует HTML, CSS и jQuery для создания адаптивных веб страниц.

Пример

<!DOCTYPE html>
<html lang="ru">
<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 Учебник.