Как создаётся адаптивная верстка: примеры использования

Адаптивная верстка – это подход к созданию веб-сайтов, который позволяет сайту корректно отображаться на различных устройствах и экранах. Сегодня этот подход является неотъемлемой частью веб-разработки, так как количество устройств и разрешений экранов постоянно растёт.

Как создаётся адаптивная верстка? Основными инструментами для её создания являются HTML, CSS и JavaScript. Первым шагом в создании адаптивной вёрстки является разработка макета сайта, который должен быть адаптирован под различные устройства. Для этого используются медиа-запросы, которые позволяют задавать различные стили для разных устройств.

Например, следующий код CSS задает стили для устройств с шириной экрана до 768px:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (max-width: 768px) {

body {

font-size: 16px;

}

Этот код задаёт размер шрифта 16 пикселей для устройств с шириной экрана до 768 пикселей. Таким образом, при просмотре сайта на устройствах с меньшей шириной экрана, текст будет читаемым и не будет выходить за границы экрана.

Другим важным инструментом для создания адаптивности является flexbox. Flexbox – это метод вёрстки, который позволяет легко распределять элементы на странице и менять их порядок в зависимости от размера экрана. Например, следующий код HTML и CSS создаёт две колонки на больших экранах и одну колонку на маленьких экранах:

HTML:

<div class="container">
  <div class="column">Колонка 1</div>
  <div class="column">Колонка 2</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  width: 50%;
}

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}

HTML:

<div class="column">Колонка 1</div>

<div class="column">Колонка 2</div>

</div>

CSS:

.container {

display: flex;

flex-wrap: wrap;

}

.column {

width: 50%;

}

@media (max-width: 768px) {

.column {

width: 100%;

}

Этот код создает две колонки на больших экранах и одну колонку на маленьких экранах. Когда ширина экрана меньше 768 пикселей, ширина каждой колонки становится 100%, что приводит к тому, что они становятся одна под другой.

Немного пояснений что к чему:

Конструкция .container — это селектор CSS, который выбирает элементы с классом container.
display: flex; устанавливает значение свойства display в flex, что превращает элементы в контейнеры с гибкими возможностями по расположению и выравниванию дочерних элементов.
flex-wrap: wrap; устанавливает значение свойства flex-wrap в wrap, что позволяет дочерним элементам переноситься на новую строку, если они не помещаются в текущей строке.

Примеры использования адаптивной вёрстки можно найти на многих сайтах. Например, сайт GitHub использует адаптивную вёрстку для корректного отображения на разных устройствах. Ниже приведён пример CSS-кода, который задаёт стили для устройств с шириной экрана до 768 пикселей:

@media (max-width: 768px) {
  .header-search-input {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {

.header-search-input {

width: 100%;

margin-top: 10px;

margin-bottom: 10px;

}

Этот код задаёт стили для поля поиска на странице GitHub при просмотре на устройствах с шириной экрана до 768 пикселей. Поле поиска занимает всю ширину экрана и имеет отступы сверху и снизу.

Резюме получается следующее. Адаптивная вёрстка – это необходимый инструмент для создания веб-сайтов, которые корректно отображаются на различных устройствах. Она позволяет задавать различные стили для разных устройств и менять порядок элементов на странице в зависимости от размера экрана. Это делает сайты более доступными и удобными для пользователей.