Учебник по HTML: Отзывчивый веб-дизайн HTML

Адаптивный дизайн — это создание веб-сайта, который хорошо выглядит на всех устройствах. Он будет автоматически подстраиваться под разные размеры экрана и точки обзора.

Установка точки обзора

Чтобы создать адаптивный веб-сайт, добавьте следующий код на все свои веб-страницы.

HTML-код:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

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

Адаптивные изображения

Это изображения, которые хорошо масштабируются, чтобы соответствовать любому размеру браузера. Использование свойства ширины Если свойство ширины CSS масштабируется до 100 %, изображение будет адаптивным и масштабируется вверх и вниз.

HTML-код:

<img src=”google.jpg” style=”width:100%;”>

Адаптивный размер текста

Размер текста можно установить с помощью единицы «vw», что означает ширину области просмотра». Таким образом, текст будет соответствовать размеру окна браузера.

HTML-код:

<h1 style=”font-size: 10vw”> Hello World</h1>

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

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

HTML-код:

<style>
.left, .right {
  float:left;
  width: 20%;
}
.main  {
  float: left;
  width:60%;
}
/* 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>

Создавайте потрясающие веб-сайты и веб-приложения

Создание различных пользовательских компонентов в React для ваших веб-приложений или веб-сайтов может стать очень напряженным. Поэтому мы решили создать контраст. Мы собрали набор пользовательского интерфейса с более чем 10000 компонентов, 5 панелей администратора и 23 дополнительных различных шаблона страниц для создания практически любого типа веб-приложения или веб-страницы в одном продукте под названием Contrast Pro. Попробуй контраст про

Contrast React Bootstrap PRO — это многоцелевой профессиональный шаблон, набор пользовательского интерфейса для создания вашего следующего лендинга, администрирования, SAAS, предварительного запуска и т. д. с чистым, хорошо документированным, хорошо продуманным шаблоном и компонентами пользовательского интерфейса. Узнать больше о Contrast Pro

Ресурсы

Вам могут пригодиться следующие ресурсы:

Первоначально опубликовано на https://www.devwares.com.

Учебник по HTML: Отзывчивый веб-дизайн HTML