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

Bootstrap 3

Für die endgültige Version von Bootstrap 3 (v3.4.1) wurden die folgenden Media Queries verwendet, die mit der Dokumentation übereinstimmen, die die verfügbaren responsiven Klassen aufführt. https://getbootstrap.com/docs/3.4/css/#responsive-utilities

/* Extra Small Geräte, .visible-xs-* */
@media (max-width: 767px) {}

/* Kleine Geräte, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Mittlere Geräte, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Große Geräte, .visible-lg-* */
@media (min-width: 1200px) {}

Media Queries extrahiert aus dem Bootstrap GitHub-Repository aus den folgenden less-Dateien:-

https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L283 https://github.com/twbs/bootstrap/blob/v3.4.1/less/responsive-utilities.less

Bootstrap 5

In der Dokumentation zur Version 5 können Sie sehen, dass die Media Query-Breakpoints seit Version 3 aktualisiert wurden, um besser zu den Dimensionen moderner Geräte zu passen.

// X-Small Geräte (Hochformat-Telefone, weniger als 576px)
// Keine Media Query für `xs`, da dies in Bootstrap das Standard ist

// Kleine Geräte (Querformat-Telefone, 576px und höher)
@media (min-width: 576px) { ... }

// Mittlere Geräte (Tablets, 768px und höher)
@media (min-width: 768px) { ... }

// Große Geräte (Desktops, 992px und höher)
@media (min-width: 992px) { ... }

// X-Large Geräte (große Desktops, 1200px und höher)
@media (min-width: 1200px) { ... }

// XX-Large Geräte (größere Desktops, 1400px und höher)
@media (min-width: 1400px) { ... }

Quelle: Bootstrap 5 Dokumentation

---

Sie können die Breakpoints für v5.1.3 im Bootstrap GitHub-Repository sehen:-

https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L461 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_breakpoints.scss

Aktualisiert am 2021-12-19

Answer 2

Hier ist ein Beispiel, wie man mithilfe von LESS Bootstrap nachahmen kann, ohne die less-Dateien zu importieren.

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs nur
@media(max-width: @screen-xs-max) {

}
//small und aufwärts
@media(min-width: @screen-sm-min) {

}
//sm nur
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md und aufwärts
@media(min-width: @screen-md-min) {

}
//md nur
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg und aufwärts
@media(min-width: @screen-lg-min) {

}

Answer 3

Basierend auf den Antworten der anderen Benutzer habe ich diese benutzerdefinierten Mixins für eine einfachere Verwendung geschrieben:

Less Eingabe

.when-xs(@regeln) { @media (max-width: @screen-xs-max) { @regeln(); } }
.when-sm(@regeln) { @media (min-width: @screen-sm-min) { @regeln(); } }
.when-md(@regeln) { @media (min-width: @screen-md-min) { @regeln(); } }
.when-lg(@regeln) { @media (min-width: @screen-lg-min) { @regeln(); } }

Beispiel Verwendung

body {
  .when-lg({
    Hintergrundfarbe: rot;
  });
}

SCSS Eingabe

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

Beispiel Verwendung:

body {
  @include when-md {
    Hintergrundfarbe: rot;
  }
}

Ausgabe

@media (min-width:1200px) {
  body {
    Hintergrundfarbe: rot;
  }
}

Answer 4

Oder einfach Sass-Compass:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

Beispiel:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}

Answer 5

Bitte beachten Sie, dass das Vermeiden von Textskalierung der Hauptgrund ist, warum responsive Layouts existieren. Die gesamte Logik hinter responsiven Websites besteht darin, funktionale Layouts zu erstellen, die Ihren Inhalt effektiv anzeigen, sodass er auf verschiedenen Bildschirmgrößen leicht lesbar und benutzbar ist.

Obwohl es in einigen Fällen erforderlich ist, Text zu skalieren, achten Sie darauf, Ihre Website nicht zu verkleinern und den Punkt zu verfehlen.

Hier ist trotzdem ein Beispiel.

@media(min-width:1200px){

    h1 {font-size:34px}

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

    h1 {font-size:32px}

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

    h1 {font-size:28px}

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

    h1 {font-size:26px}

}

Denken Sie auch daran, dass die 480-Viewport in Bootstrap 3 entfernt wurde.