Возможно ли вложить медиа-запросы в медиа-запросы?

Question

Возможно ли это?Мне кажется, это изящное решение, но я не уверен, что оно сработает.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

    /* Code for both portrait and landscape */

    @media (orientation:portrait) {

        /* Code for just portrait */

    }

    @media (orientation:landscape) {

        /* Code for just landscape */

    }

}

Answer 1

Вы должны иметь возможность nest @media правила таким образом в CSS3 , но это еще не поддерживается большинством браузеров.Подробности см. в этом ответе .

Вам потребуется полностью развернуть и повторить медиа-запросы верхнего уровня для внутренних правил, чтобы он работал во всех браузерах (и я думаю, что процессор SCSS будетгенерировать что-то похожее):

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
    /* Code for both portrait and landscape */
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {

    /* Code for just portrait */

}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) {

    /* Code for just landscape */

}

Answer 2

Если вы хотите сделать это, лучше всего использовать высокоуровневый медиа-запрос в теге ссылки, а затем другие запросы внутри связанного листа.

На практике большинство людей каскадно применяют свои правила CSSиз базового листа, который охватывает общий материал, а затем вносит изменения в каждый набор правил мультимедиа.

Answer 3

Я думаю, что это невозможно, но вы можете написать этот формат, если вы используете препроцессор SASS css.

Например, вы можете скопировать этот код и вставить в https://www.sassmeister.com/ и посмотреть вывод

SASS

@media only screen and (max-width: 767px) {
  body{
    color:red;
  }
   @media (orientation:portrait) {
       body{
        color:green;
      }
   }
   @media (orientation:landscape) {
       body{
        color:orange;
      }
   }
}

Выходной CSS

@media only screen and (max-width: 767px) {
  body {
    color: red;
  }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  body {
    color: green;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  body {
    color: orange;
  }
}