Media Queries - Layout für den Desktop
Festlegung von CSS-Regeln in der style.css, die nur bei bestimmten Bildschirmgrößen aktiv werden. (am Ende einfügen)

CSS-Regel nur anwenden, wenn das Browserfenster mindestens 768 Pixel breit ist
Alles was sich innerhalb der geschweiften Klammern { } befindet, wird nur dann ausgeführt,
wenn der Monitor mindestens 768 Pixel breit ist.

/*  
Der Code @media sagt WordPress, dass es sich um eine Media Query handelt  
(mind-width) = Mindestbreite 768 Pixel
*/

@media screen and (min-width: 768px) {
...

}

Beispiel
Bei einem größer als 768px großen Fenster werden die Texte rot angezeigt, bei einem kleinern nicht.
@media screen and (min-width: 768px) {
  p {color: red; }
}

Mehrere Media Queries
/* Monitor höchstens 768px */
@media screen and (max-width: 768px) { ... }

/* Monitor mindestens 768px */
@media screen and (min-width: 768px) { ... }

/* Monitor mindestens 1024px */
@media screen and (min-width: 1024px) { ... } 

/* Monitor nur zwischen 768px und 1024px  */
@media screen and (min-width: 768px) and (max-width: 1024px) { ... } 

Media Features

Medien-Typen

Media Queries für Drucken bzw. Druckvorschau
Der Code in den geschweiften Klammern wird nur dann ausgeführt, wenn eine Druckvorschau
oder ein Seitendruck aufgerufen wird.

/* Media-Query für einen Farbmonitor, mindestens 768 Pixel breit  */
@media screen and (min-width: 768px) {
  p {color: red; }
}