HTML Адаптивный веб-дизайн
Что такое Адаптивный веб-дизайн?
Адаптивный веб-дизайн делает вашу веб-страницу хорошо выглядеть на всех устройствах (настольных компьютерах, планшетах и телефонах).
Отзывчивый веб-дизайн об использовании HTML и CSS, чтобы изменить размер, скрыть, сжать, увеличить или переместить содержимое, чтобы он хорошо выглядеть на любом экране:
Примечание: Веб-страница должна хорошо выглядеть на любом устройстве!
Настройка видового экрана
При создании адаптивных веб-страниц добавьте следующий элемент <meta> на всех веб-страницах:
Пример
<meta name="viewport" content="width=device-width, initial-scale=1.0">
При этом будет установлен видовой экран страницы, в котором будут даны инструкции по управлению размерами и масштабированием страницы.
Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки выше, чтобы увидеть разницу.
Адаптивные образы
Адаптивные образы — это изображения, которые хорошо масштабируются в соответствии с любым размером браузера.
Использование свойства 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="Flowers">
</picture>
Размер адаптивного текста
Размер текста можно задать с помощью блока "VW", что означает "ширина видового экрана".
Таким образом размер текста будет следовать размеру окна браузера:
Hello World
Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер текста.
Пример
<h1 style="font-size:10vw">Hello World</h1>
Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.
Мультимедийные запросы
В дополнение к изменению размера текста и изображений, также часто используются мультимедийные запросы на адаптивных веб-страницах.
С помощью мультимедийных запросов можно определить совершенно разные стили для различных размеров браузера.
Пример: измените размер окна обозревателя, чтобы увидеть, что три элемента div ниже будут отображаться горизонтально на больших экранах и штабелироваться вертикально на небольших экранах:
Пример
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to
add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left,
.main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
Совет: Чтобы узнать больше о мультимедийных запросах и адаптивном веб-дизайне, прочитайте наш учебник RWD.
Отзывчивый веб-страница-полный пример
Отзывчивый веб-страницы должны хорошо выглядеть на больших экранах настольных и малых мобильных телефонов.
Адаптивный веб-дизайн-фреймворки
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 Справочник.