Drucken

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

Media-Feature Gültigkeit
width Monitor genau dieser Breite
min-width Monitor mindestens diese Breite
max-width Monitor höchstens diese Breite
height Monitor genau diese Höhe
min-height Monitor mindestens diese Höhe
max-height Monitor höchstens diese Höhe
orientation Gerät verwendet:
portrait = Hochformat / landscape = Querformat
aspect-ration Monitor weist Seitenverhältnis auf z.B. 4:3 oder 16:9
resulotion Monitor weist die vorgegebene Pixeldichte auf
Punkte pro Inch (dpi) /  Punkte pro Zentimeter (dpcm)
   

 



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

Medien-Typen Gültigkeit
all MCSS-Code gilt immer
braille Braillezeile - für blinde Menschen 
embossed Brailledrucker - Ausgabegerät für blinde Menschen
handheld Kleine Gerät mit monochrom Bildschirm
print Drucker oder Druckvorschau
projection Anzeige über Beamer
screen Farbmonitor
speech Screenreader / Vorleseprogramm
tty reine Textausgabe ohne Bilder
 tv Fernseher

 

Zugriffe: 2348