wake-up-neo.net

Ist es möglich, Medienabfragen in Medienabfragen zu verschachteln?

Ist das möglich? Es scheint mir eine gute Lösung zu sein, aber ich bin mir nicht sicher, ob es funktionieren wird.

@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 */

    }

}
25
SparrwHawk

Sie sollten in der Lage sein, @media-Regeln in CSS3 zu verschachteln , aber dies wird von den meisten Browsern noch nicht unterstützt. Siehe diese Antwort für Details.

Sie müssten die Medienabfragen auf oberster Ebene vollständig erweitern und wiederholen, damit die inneren Regeln für die Funktion in allen Browsern gelten (und ich stelle mir vor, der SCSS-Prozessor würde etwas Ähnliches generieren):

@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 */

}
29
BoltClock

Wenn Sie dies tun möchten, verwenden Sie am besten die Abfrage auf hoher Medienebene in einem Link-Tag und anschließend die anderen Abfragen im verknüpften Blatt.

In der Praxis werden die CSS-Regeln von den meisten Benutzern ausgehend von einem Basisblatt kaskadiert, in dem die allgemeinen Dinge behandelt werden, und anschließend werden Änderungen an den einzelnen Medienregelsätzen vorgenommen.

2
Richard Hulse

Ich denke nicht möglich, aber Sie können dieses Format schreiben, wenn Sie SASS CSS Pre-Prozessor verwenden.

sie können diesen Code beispielsweise kopieren und in https://www.sassmeister.com/ einfügen und die Ausgabe ansehen

SASS

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

CSS ausgeben

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