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

:)

In der neuesten Bootstrap-Version (4.3.1) können Sie mit SCSS(SASS) einen der @mixin aus /bootstrap/scss/mixins/_breakpoints.scss verwenden

Medien von mindestens der minimalen Breakpoint-Breite. Keine Abfrage für den kleinsten Breakpoint. Lässt den @content auf den angegebenen Breakpoint und weiter anwenden.

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

Medien von höchstens der maximalen Breakpoint-Breite. Keine Abfrage für den größten Breakpoint. Lässt den @content auf den angegebenen Breakpoint und schmaler anwenden.

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

Medien, die mehrere Breakpoint-Breiten umspannen. Lässt den @content zwischen den min und max Breakpoints anwenden

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

Medien zwischen der minimalen und maximalen Breite des Breakpoints. Kein Minimum für den kleinsten Breakpoint und kein Maximum für den größten. Lässt den @content nur auf den angegebenen Breakpoint anwenden, nicht auf Ansichten, die breiter oder schmaler sind.

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

Zum Beispiel:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

Dokumentation:

• Einführung https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• Migration https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• Variablen https://getbootstrap.com/docs/4.3/layout/grid/#variables

Viel Spaß beim Coden ;)

Answer 2

Um die Hauptantwort zu verbessern:

Sie können das media-Attribut des -Tags verwenden (das Media Queries unterstützt), um nur den Code herunterzuladen, den der Benutzer benötigt.

Der Browser wird daher alle CSS-Ressourcen herunterladen, unabhängig vom media-Attribut. Der Unterschied besteht darin, dass, wenn die Media-Query des Media-Attributs als falsch ausgewertet wird, diese .css-Datei und ihr Inhalt nicht blockierend gerendert werden.

Deshalb wird empfohlen, das media-Attribut im -Tag zu verwenden, da es eine bessere Benutzererfahrung garantiert.

Hier können Sie einen Artikel von Google zu diesem Thema lesen https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Einige Tools, die Ihnen helfen, die Trennung Ihres CSS-Codes in verschiedene Dateien entsprechend Ihren Media-Queries zu automatisieren

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query