ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

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 URL кодирование HTML XHTML

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работники HTML SSE

HTML Примеры

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

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

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

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


Responsive

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

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

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

Примечание: Веб-страница должна хорошо выглядеть на любых устройствах!


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

При создании адаптивных веб-страниц добавьте следующий элемент <meta> на все свои веб-страницы:

Example

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

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

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

Без метатега 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> позволяет определять разные изображения для разных размеров окна браузера.

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

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

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

Пример

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

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


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

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

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

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

Main Content


Right Content


Пример

<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 Учебник на этом сайте.


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

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

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


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

Есть много 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 Учебник.


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 Учебник.