Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML Адаптивный



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

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

Responsive Web Design

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

Адаптивный веб дизайн - это использование 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>
 <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 Учебник.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.