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

Hier sind die Selektoren, die in BS3 verwendet werden, wenn Sie konsistent bleiben möchten:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Hinweis: Zur Information, dies kann hilfreich sein zum Debuggen:

GRÖSSE XS
GRÖSSE SM
GRÖSSE MD
GRÖSSE LG

Bootstrap 4

Hier sind die Selektoren, die in BS4 verwendet werden. Es gibt keine "niedrigste" Einstellung in BS4, weil "extra small" der Standard ist. D.h. Sie würden zuerst die XS-Größe codieren und dann diese Medien-Overrides danach haben.

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

Bootstrap 5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

Aktualisierung 2021-05-20: Informationen sind immer noch korrekt für Versionen 3.4.1, 4.6.0, 5.3.0.

Answer 2

Auf Basis von bisios Antwort und dem Bootstrap 3-Code konnte ich eine genauere Antwort für alle erstellen, die einfach nur den kompletten Medienabfrage-Satz in ihr Stylesheet kopieren möchten:

/* Große Desktops und Laptops */
@media (min-width: 1200px) {

}

/* Querformat-Tablets und mittelgroße Desktops */
@media (min-width: 992px) und (max-width: 1199px) {

}

/* Hochformat-Tablets und kleine Desktops */
@media (min-width: 768px) und (max-width: 991px) {

}

/* Querformat-Telefone und Hochformat-Tablets */
@media (max-width: 767px) {

}

/* Hochformat-Telefone und kleiner */
@media (max-width: 480px) {

}

Answer 3

Wenn Sie LESS oder SCSS/SASS verwenden und eine LESS/SCSS-Version von Bootstrap verwenden, können Sie auch Variablen verwenden, sofern Sie Zugriff darauf haben. Eine LESS-Übersetzung von @full-decent's Antwort würde wie folgt aussehen:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* veraltet: @screen-tablet, oder @screen-sm */
@media(min-width: @screen-md-min){}  /* veraltet: @screen-desktop, oder @screen-md */
@media(min-width: @screen-lg-min){}  /* veraltet: @screen-lg-desktop, oder @screen-lg */

Es gibt auch Variablen für @screen-sm-max und @screen-md-max, die jeweils 1 Pixel weniger als @screen-md-min und @screen-lg-min sind, normalerweise für die Verwendung mit @media(max-width).

EDIT: Wenn Sie SCSS/SASS verwenden, beginnen Variablen mit einem $ anstelle von einem @, daher wäre es $screen-xs-max usw.

Answer 4

Das sind die Werte von Bootstrap3:

/* Extra Small */
@media(max-width:767px){}

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

/* Medium */
@media(min-width:992px) und (max-width:1199px){}

/* Large */
@media(min-width:1200px){}

Answer 5

Hier sind zwei Beispiele.

Sobald der Viewport 700px breit oder weniger wird, mache alle h1 Tags 20px groß.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Mache alle h1 Tags 20px groß, bis der Viewport 700px oder größer wird.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Hoffe, das hilft :0)