Медиа-запросы CSS – адаптивная верстка

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

@media (max-width: 768px) and (orientation: portrait) {
  /* Стили для устройств с максимальной шириной экрана 768px и портретной ориентацией */
}

@media not screen and (max-width: 768px) {
  /* Стили для устройств, ширина экрана которых не превышает 768px */
}

@media (max-width: 768px), (orientation: landscape) {
  /* Стили для устройств с максимальной шириной экрана 768px или альбомной ориентацией */
}

@media only screen and (max-width: 768px) {
  /* Стили для устройств с максимальной шириной экрана 768px, игнорируя другие медиа-запросы */
}

@media (max-width: 480px) or (min-width: 1024px) {
  /* Стили для устройств с максимальной шириной экрана 480px или минимальной шириной 1024px */
}

@media screen and (max-width: 768px) {
  /* ... */
}

/* Стили для печати */
@media print {
  /* ... */
}

/* Стили для устройств с синтезаторами речи */
@media speech {
  /* ... */
}

/* Стили для всех типов устройств с максимальной шириной 480px */
@media all and (max-width: 480px) {
  /* ... */
}

/* Применить стили, если ширина экрана меньше или равна 768px */
@media (max-width: 768px) {
  /* Ваши стили здесь */
}

/* Стили для экранов с шириной 768px и более */
@media (min-width: 768px) {
  /* Ваши стили здесь */
}

@media (min-height: 600px) {
  /* Стили, применяемые, если высота экрана больше или равна определенному значению */
}
@media (max-height: 400px) {
  /* Стили, применяемые, если высота экрана или меньше или равна определенному значению. */
}

@media (orientation: landscape) {
  /* Стили для горизонтальной ориентации */
}
@media (orientation: portrait) {
  /* Стили для вертикальной ориентации */
}

@media (min-resolution: 2dppx) {
  /* Стили для устройств с разрешением больше 1440px (ретиновые дисплеи) */
}
@media (max-resolution: 1.5dppx) {
  /* Стили для устройств с разрешением меньше или равно 768px */
}
@media (resolution: 300dpi) {
  /* Стили для устройств с разрешением дисплея 300dpi */
}

@media (max-device-width: 768px) {
  /* Стили для устройств с максимальной шириной 768px */
}
@media (min-device-height: 600px) {
  /* Стили для устройств с минимальной высотой 600px */
}

@media (min-device-width: 768px) and (max-device-height: 1024px) {
  /* Стили для устройств с шириной от 768px до 1024px и соответствующей высотой */
}

<!-- 1 -->
<div class="wrap_container">
   <div class="item_container">
      <div class="item_box">
         <div class="item_content">
            <h2>Блок 1</h2>
            <p>текст</p>
         </div>
      </div>
      <div class="item_box">
         <div class="item_content">
            <h2>Блок 2</h2>
            <p>текст</p>
         </div>
      </div>
      <div class="item_box">
         <div class="item_content">
            <h2>Блок 2</h2>
            <p>текст</p>
         </div>
      </div>
   </div>
</div>
<!-- 2 -->
<div class="wrap_container-2">
   <div class="item_container-2">
      <div class="item_box-2">
         <div class="item_content-2">
            <h2>Блок 1</h2>
            <p>текст</p>
         </div>
      </div>
      <div class="item_box-2">
         <div class="item_content-2">
            <h2>Блок 2</h2>
            <p>текст</p>
         </div>
      </div>
   </div>
</div>
<!-- 3 -->
<div class="wrap_container-3">
   <div class="item_container-3">
      <div class="item_box-3">
         <div class="item_content-3">
            <h2>Блок 1</h2>
            <p>текст</p>
         </div>
      </div>
      <div class="item_box-3">
         <div class="item_content-3">
            <h2>Блок 2</h2>
            <p>текст</p>
         </div>
      </div>
      <div class="item_box-3">
         <div class="item_content-3">
            <h2>Блок 2</h2>
            <p>текст</p>
         </div>
      </div>
      <div class="item_box-3">
         <div class="item_content-3">
            <h2>Блок 2</h2>
            <p>текст</p>
         </div>
      </div>
   </div>
</div>

/*  3 column*/
.wrap_container {
        background: #424242;
        width: 100%;
        padding: 60px 0;
}

.item_container {
        display: flex;
        flex-wrap: wrap;
        max-width: 1100px;
        margin: 0px auto;
        padding: 0.5rem;
}

.item_box {
        width: 33.33%;
        padding: .7rem;
}

.item_content {
        background: #888;
        padding: 2rem;
        border-radius: 5px;
}

.item_content h2 {
        margin-bottom: .6rem;
        font-size: 30px;
}

.item_content p {
        margin-bottom: 0;
}

/* @media - 3 column */
@media (max-width: 768px) {
    .item_box {
                width: 50%;
        }
        
        .item_content h2 {
                font-size: 26px;
        }
}

@media (max-width: 480px) {
    .item_box {
                width: 100%;
        }
        
        .item_content {
                padding: 1.4rem;
        }
        
        .item_content h2 {
                font-size: 21px;
        }
}

/*  2 column*/
.wrap_container-2 {
        background: #d0d0d0;
        width: 100%;
        padding: 60px 0;
}

.item_container-2 {
        display: flex;
        flex-wrap: wrap;
        max-width: 1100px;
        margin: 0px auto;
        padding: 0.5rem;
}

.item_box-2 {
        width: 50%;
        padding: .7rem;
}

.item_content-2 {
        background: #888;
        padding: 2rem;
        border-radius: 5px;
}

.item_content-2 h2 {
        margin-bottom: .6rem;
        font-size: 30px;
}

.item_content-2 p {
        margin-bottom: 0;
}

/* @media - 3 column */
@media (max-width: 768px) {
        .item_content-2 h2 {
                font-size: 26px;
        }
}

@media (max-width: 480px) {
    .item_box-2 {
                width: 100%;
        }
        
        .item_content-2 {
                padding: 1.4rem;
        }
        
        .item_content-2 h2 {
                font-size: 21px;
        }
}

/*  4 column*/
.wrap_container-3 {
        background: #ececec;
        width: 100%;
        padding: 60px 0;
}

.item_container-3 {
        display: flex;
        flex-wrap: wrap;
        max-width: 1100px;
        margin: 0px auto;
        padding: 0.5rem;
}

.item_box-3 {
        width: 25%;
        padding: .7rem;
}

.item_content-3 {
        background: #888;
        padding: 2rem;
        border-radius: 5px;
}

.item_content-3 h2 {
        margin-bottom: .6rem;
        font-size: 30px;
}

.item_content-3 p {
        margin-bottom: 0;
}

/* @media - 3 column */
@media (max-width: 768px) {
        .item_box-3 {
                width: 50%;
        }
        
        .item_content-3 h2 {
                font-size: 26px;
        }
}

@media (max-width: 480px) {
    .item_box-3 {
                width: 100%;
        }
        
        .item_content-3 {
                padding: 1.4rem;
        }
        
        .item_content-3 h2 {
                font-size: 21px;
        }
}