HTML. Адаптивный веб-дизайн
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
Что такое адаптивный веб-дизайн?
Адаптивный веб-дизайн - это использование 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="Flowers">
</picture>
Попробуйте сами »
Адаптивный размер текста
Размер текста можно установить с помощью модуля "vw", что означает "viewport width" (ширина окна просмотра). Таким образом, размер текста будет соответствовать размеру окна веб-браузера.
Hello World
Измените размер окна браузера, чтобы увидеть размер текста.
Примечание: Viewport - это размер окна браузера. 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 (Responsive Web Design/Адаптивный веб-дизайн).
Адаптивная веб-страница - полный пример
Адаптивная веб-страница должна хорошо выглядеть как на больших экранах стационарных компьютеров, так и на небольших мобильных телефонах.
Hello World
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
About
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Адаптивный веб-дизайн - фреймворки
Существует много готовых CSS-фреймворков, которые предлагают адаптивный дизайн. Они бесплатны и просты в использовании.
Использование W3.CSS
Отличный способ создать адаптивный дизайн - это использование соответствующей таблицы стилей, например W3.CSS. Фреймворк W3.CSS позволяет легко разрабатывать сайты, которые хорошо выглядят на любом экране: на десктопе, на ноутбуке, планшете или телефоне:
W3.CSS Demo
Измените размер окна страницы, чтобы увидеть адаптивность!
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>Измените размер окна страницы, чтобы увидеть адаптивность!</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 4 на нашем сайте.