медиа-запрос для ширины от 2 до более трети

Question

Я пытаюсь выполнить следующий медиа-запрос, но у меня возникли проблемы - мне нужно разделить его и сделать 2 отдельных (повторяя все стили для каждого) или они могут быть объединены каким-либо образом?

.container {
  padding: rem(16px);
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 600px) and (max-width: 768px) and (min-width: 1550px) {
  /* want this to turn into a row in between 600 and 768 and over 1550px but the above doesn't seem to work */
  .container {
    flex-direction: row;
    align-items: center;
  }
}

/* have also tried 
@media only screen and (min-width: 600px) and (max-width: 768px),
@media only screen and (min-width: 1550px) {
  this does not work either
}

*/

<div class="container">
  <div>div 1</div>
  <div>div 2</div>
</div>

Answer 1

Вы можете комбинировать медиазапросы с запятой.

@media only screen and (min-width: 600px) and (max-width: 768px), screen and (min-width: 1550px) {
  ...
}

Answer 2

@media only screen and (min-width:600px) and (max-width: 768px),
(min-width: 1550px){

    .container {
        flex-direction: row;
        background: green;
        align-items: center;
     }

}

1. Используйте запятую и пропустите @media для нескольких значений ширины с одинаковыми стилями.
2. Убедитесь, что у вас есть адаптивный метатег. например <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">

Answer 3

Вы можете полностью отделить медиазапросы:

.container {
  padding: rem(16px);
  display: flex;
  flex-direction: column;
}
 
@media only screen and (min-width: 600px) and (max-width: 768px) {
  .container {
    flex-direction: row;
    align-items: center;
  }
}

@media only screen and (min-width: 1550px) {
  .container {
    flex-direction: row;
    align-items: center;
  }
}

<div class="container">
  <div>div 1</div>
  <div>div 2</div>
</div>