Czy można zagnieżdżać zapytania o media w zapytaniach o media?

Question

Czy to możliwe? Wydaje mi się to miłym rozwiązaniem, ale nie jestem pewien, czy to zadziała.

@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

Powinieneś móc nest @media rules this way in CSS3, ale to nie jest jeszcze obsługiwany przez większość przeglądarek. Szczegóły: this answer.

Trzeba by w pełni rozwinąć i powtórzyć zapytań o media najwyższego poziomu dla wewnętrznych reguł go do pracy w różnych przeglądarkach (i wyobrażam sobie procesor SCSS będzie generować coś podobnego):

@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

Jeśli chciałem to zrobić najlepiej, aby użyć zapytania o media wysokiego poziomu w tagu linku, a następnie innych zapytań w połączonym arkuszu.

W praktyce, chociaż większość ludzi kaskaduje swoje reguły CSS z arkusza bazowego, który obejmuje typowe elementy, a następnie wprowadzanie zmian do tych w każdym zestawie reguł mediów.

Answer 3

Wydaje mi się, że nie jest to możliwe, ale możesz napisać ten format, jeśli korzystasz z pre-procesora SASS css.

przykład, można skopiować ten kod i wklej do https://www.sassmeister.com/ -i dopatrzyć wyświetlamy

Sass

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

CSS Wyjście

@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; 
    } 
}