Адаптивный веб дизайн - это создание веб страниц, которые хорошо смотрятся на всех устройствах!
Адаптивный веб дизайн автоматически настраивается для различных размеров экрана и видовых экранов.
Что такое адаптивный веб дизайн?
Адаптивный веб дизайн - это использование HTML и CSS для автоматического изменения размера, скрытия, сжатия или увеличения, веб сайт, чтобы он хорошо выглядел на всех устройствах (настольных компьютерах, планшетах и телефонах):
Настройка видового экрана
Чтобы создать адаптивный веб сайт, добавьте следующей тег <meta> для всех ваших веб страниц:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Попробуйте сами »
Это позволит установить окно просмотра вашей страницы, которое даст браузеру инструкции о том, как управлять размерами и масштабированием страницы.
Вот пример веб страницы без мета тега 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>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://schoolsw3.com/w3css/4/sw3.css">
</head>
<body>
<div class="sw3-container sw3-orange">
<h1>W3.CSS Демо</h1>
<p>Изменить макет на отзывчивый!</p>
</div>
<div class="sw3-row-padding">
<div class="sw3-third">
<h2>Лондон</h2>
<p>Лондон является столицей Англии.</p>
<p>Это самый густонаселенный город в Соединенном Королевстве,
с пригородами свыше 13 миллионов жителей.</p>
</div>
<div class="sw3-third">
<h2>Париж</h2>
<p>Париж - столица Франции.</p>
<p>В Париже находится один из крупнейших центров населения в Европе,
с более чем 12 миллионов жителей.</p>
</div>
<div class="sw3-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 Учебник.