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/