Чтобы сделать ваш веб-сайт адаптивным, вы можете сделать это вручную, установив ширину любого элемента ширины страницы равным 100%, например, основного <div>, а затем избегайте появления любой горизонтальной полосы прокрутки. Или просто используя адаптивную библиотеку, такую как Bootstrap 4.0.
Чтобы использовать bootstrap библиотеку, поместите следующую строку в раздел <head>:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
, а затем в body поместите ваши страницы внутрь:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Your Page HTML Here -->
</div>
</div>
</div>
</body>
Для получения дополнительной информации, а также для изучения Bootstrap 4 и понимания того, как это работает, посетите их официальный сайт: https://getbootstrap.com/docs/4.0/getting-started/introduction/ Вы найдете другие адаптивные компоненты, такие как: меню, вкладки, кнопки, элементы управления формами и многое другое. Также вы узнаете, как скрывать и отображать элементы в зависимости от ширины экрана для основной ширины экрана, а также всплывающие окна, «называемые модальными», и другие комплексные элементы, которые можно использовать на своем веб-сайте, чтобы оставаться отзывчивым.