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/
