Twitter Bootstrap 3: wie benutzt man Media Queries?

Question

Ich verwende Bootstrap 3, um ein responsives Layout zu erstellen, in dem ich einige Schriftgrößen je nach Bildschirmgröße anpassen möchte. Wie kann ich Media Queries verwenden, um diese Art von Logik zu erstellen?

Answer 1

Wir verwenden die folgenden Media Queries in unseren Less-Dateien, um die Schlüssel-Breakpoints in unserem Rastersystem zu erstellen.

/* Kleine Geräte (Tablets, 768px und größer) */
@media (min-width: @screen-sm-min) { ... }

/* Mittlere Geräte (Desktops, 992px und größer) */
@media (min-width: @screen-md-min) { ... }

/* Große Geräte (große Desktops, 1200px und größer) */
@media (min-width: @screen-lg-min) { ... }

Siehe auch auf Bootstrap

Answer 2

Sie können in meinem Beispiel sehen, dass Schriftgrößen und Hintergrundfarben je nach Bildschirmgröße angepasst werden

body {
    background-color: lightgreen;
}
/* Benutzerdefiniert, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra kleine Geräte, Telefone */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Kleine Geräte, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Mittelgroße Geräte, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Große Geräte, Breite Bildschirme */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}

Ändern Sie die Größe des Browserfensters. Wenn die Breite dieses Dokuments größer ist als die Höhe, ist die Hintergrundfarbe "Hellblau", sonst ist sie "Hellgrün".

Answer 3

Hier ist eine noch einfachere All-in-One-Lösung, inklusive separater responsiver Dateien basierend auf Media Queries.

Dies ermöglicht es, dass alle Logiken für Media Queries und Einbindungen nur auf einer Seite, dem Loader, existieren müssen. Es verhindert auch, dass die Media Queries die responsiven Stylesheets selbst überfüllen.

//loader.less

// Dieser twbs-include fügt alle bs-Funktionalitäten hinzu, einschließlich zusätzlicher Bibliotheken wie elements.less und unserer benutzerdefinierten Variablen
@import '/app/Resources/less/bootstrap.less';

/*
* Unsere grundlegenden benutzerdefinierten twbs-Überschreibungen
* (Telefone, xs, d.h. weniger als 768px, und größer)
* Für diese ist keine Media Query erforderlich, da dies in Bootstrap standardmäßig ist
* Alle Stile gehören zunächst hierher. Wenn Sie eine größere Bildschirmüberschreibung benötigen, verschieben Sie diese in eine der unten stehenden responsiven Dateien
*/
@import 'base.less';

/*
* Unsere responsiven Überschreibungen basierend auf unseren Breakpoint-Variablen
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(Tablets, 768px und größer)
@import url("md-min.less") (min-width: @screen-md-min); //(Desktops, 992px und größer)
@import url("large-min.less") (min-width: @screen-lg-min); //(Große Desktops, 1200px und größer)

base.less würde so aussehen

/**
* base.less
* Bootstrap-Überschreibungen
* Extra kleine Geräte, Telefone, weniger als 768px und größer
* Keine Media Query, da dies in Bootstrap standardmäßig ist
* Alle Master-Seitenstile gehören hierher
* Platzieren Sie responsive Überschreibungen in den entsprechenden responsiven Tabellen selbst
*/
body{
  background-color: @fadedblue;
}

sm-min.less würde so aussehen

/**
* sm-min.less
* min-width: @screen-sm-min
* Kleine Geräte (Tablets, 768px und größer)
*/
body{
  background-color: @fadedgreen;
}

Ihr Index muss nur den loader.less laden

Ganz einfach..

Answer 4

@media nur Bildschirm und (max-width: 1200px) {}

@media nur Bildschirm und (max-width: 979px) {}

@media nur Bildschirm und (max-width: 767px) {}

@media nur Bildschirm und (max-width: 480px) {}

@media nur Bildschirm und (max-width: 320px) {}

@media (min-width: 768px) und (max-width: 991px) {}

@media (min-width: 992px) und (max-width: 1024px) {}

Answer 5

Verwenden Sie Media Queries für IE;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}