Чтобы объединить два размера экрана в медиазапросах в CSS, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:

1. Использование списка, разделенного запятыми. Вы можете указать несколько размеров экрана, разделив их запятой в одном медиа-запросе. Например:

@media screen and (max-width: 768px), screen and (min-width: 1200px) {
  /* CSS rules for screens with a width less than 768px or greater than 1200px */
}

В приведенном выше примере правила CSS будут применяться к экранам шириной менее 768 пикселей или более 1200 пикселей.

2. Использование логических операторов. Вы также можете использовать логические операторы, такие как andи or, для объединения нескольких медиазапросов. Например:

@media screen and (max-width: 768px), (min-width: 1200px) {
  /* CSS rules for screens with a width less than 768px or greater than 1200px */
}

Этот подход дает тот же результат, что и предыдущий пример.

3. Использование вложенных медиа-запросов. Другой метод — вложить медиа-запросы друг в друга. Это позволяет создавать более сложные комбинации размеров экрана. Например:

@media screen and (max-width: 768px) {
  /* CSS rules for screens with a width less than 768px */
  @media screen and (min-width: 1200px) {
    /* CSS rules for screens with a width less than 768px and greater than 1200px */
  }
}

В этом примере внутренний медиа-запрос будет применяться только в том случае, если ширина экрана меньше 768 пикселей и больше 1200 пикселей.