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

Ответ 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 */

}

Ответ 2

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

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

Ответ 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;
  }
}