Begleitende Website zum Kurs Künstler*innen Website gestalten mit WordPress für Kunststudierende, Kunstschaffende und Interessierte.

Media Queries

Media Queries (Medienabfragen) fügst Du Deinem Stylesheet (Stilvorlage) hinzu, um Dein Layout für die verschiedenen Devices (Endgeräte) zu optimieren.

Best Practice: zuerst kommen alle allgemein gültigen Regelsätze und Werte für kleinste Devices, danach die Anpassungen für die nächste Größe, angegeben mit der Minimalweite des Bildschirm.

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
   selector {...}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min){
   selector {...}
}

/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) {
   selector {...}
}

Meine Angaben stammen aus dem Framework Bootstrap: http://getbootstrap.com/css/#grid-media-queries

Darüberhinaus lassen sich min-width und max-width kombinieren, siehe z.B. hier: http://stephen.io/mediaqueries/