1. Адаптивная верстка (Responsive Design)

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

• Гибкие макеты (Fluid Layouts): Использование относительных единиц измерения, таких как проценты (%), em, rem, чтобы элементы автоматически подстраивались под размер экрана.

  .container {
    width: 80%; /* Ширина контейнера будет 80% от ширины экрана */
    padding: 2em; /* Отступы внутри контейнера */
  }
  
  

• Гибкие изображения (Flexible Images): Установка максимальной ширины изображений в 100%, чтобы они не выходили за границы контейнера.

  img {
    max-width: 100%; /* Изображение будет уменьшаться, но не увеличиваться */
    height: auto; /* Высота будет пропорционально изменяться */
  }
  
  

• Медиазапросы (Media Queries): Позволяют применять разные стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация и т.д.

2. Медиазапросы (Media Queries)

Медиазапросы позволяют адаптировать стиль страницы под разные размеры экранов и устройства. Они часто используются для создания адаптивных макетов.

• Базовый синтаксис медиазапроса:

  @media (условие) {
    /* CSS правила */
  }
  
  

• Пример медиазапроса для мобильных устройств:

  @media (max-width: 600px) {
    .container {
      width: 100%;
      padding: 1em;
    }
    .item {
      font-size: 14px;
    }
  }
  
  

• Пример медиазапроса для планшетов:

  @media (min-width: 601px) and (max-width: 1024px) {
    .container {
      width: 90%;
      padding: 1.5em;
    }
    .item {
      font-size: 16px;
    }
  }
  
  

• Пример медиазапроса для десктопов:

  @media (min-width: 1025px) {
    .container {
      width: 80%;
      padding: 2em;
    }
    .item {
      font-size: 18px;
    }
  }
  
  

• Медиазапросы по ориентации устройства:

  @media (orientation: landscape) {
    .container {
      padding: 3em;
    }
  }
  
  @media (orientation: portrait) {
    .container {
      padding: 1em;
    }
  }
  
  

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

• Адаптивная сетка с использованием Flexbox и медиазапросов:

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 1 1 100%; /* Элементы будут занимать 100% ширины на узких экранах */
  }
  
  @media (min-width: 600px) {
    .item {
      flex: 1 1 48%; /* Элементы будут занимать 48% ширины на экранах шире 600px */
      margin: 1%;
    }
  }
  
  @media (min-width: 1024px) {
    .item {
      flex: 1 1 30%; /* Элементы будут занимать 30% ширины на экранах шире 1024px */
      margin: 1.5%;
    }
  }
  
  

• Пример HTML для адаптивной сетки:

  <div class="container">
    <div class="item">Элемент 1</div>
    <div class="item">Элемент 2</div>
    <div class="item">Элемент 3</div>
    <div class="item">Элемент 4</div>
  </div>
  
  

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