web-dev-qa-db-de.com

Bootstrap 3 Haltepunkte und Medienabfragen

In der Dokumentation zu Bootstrap 3-Medienabfragen heißt es:

In unseren Less-Dateien verwenden wir die folgenden Medienabfragen, um die wichtigsten Haltepunkte in unserem Rastersystem zu erstellen.

Extra kleine Geräte (Telefone mit weniger als 768px): Keine Medienabfrage, da dies die Standardeinstellung in Bootstrap ist

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

Mittlere Geräte (Desktops, 992px und höher): @media (min-width: @screen-md-min) { ... }

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

Sollen wir die Namen @screen-sm, @screen-md und @screen-lg auch in unseren Medienabfragen verwenden können? Weil es bei mir nicht funktioniert. Ich muss Pixelmessungen wie @media (min-width: 768px) {...} verwenden, bevor es funktioniert. Mache ich etwas falsch?

Ist der Hinweis auf 480px für besonders kleine Geräte auch ein Tippfehler? Sollte das nicht bis zu 767px heißen? ( da aus der Dokumentation entfernt )

146
Kris Hunt

Bootstrap 4-Medienabfragen

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4 bietet Quell-CSS in Sass, das Sie über Sass-Mixins einbinden können:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Bootstrap 3-Medienabfragen

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Bootstrap 2.3.2 Medienabfragen

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

Ressource von: https://scotch.io/quick-tips/default-sizes-for-Twitter-bootstraps-media-queries

171
Sophy

Bootstrap dokumentiert die Medienabfragen nicht sehr gut. Diese Variablen von @screen-sm, @screen-md, @screen-lg beziehen sich tatsächlich auf LESS-Variablen und nicht auf einfaches CSS.

Wenn Sie Bootstrap anpassen, können Sie die Medienabfrage-Haltepunkte ändern. Beim Kompilieren werden die Variablen @ screen-xx auf die Pixelbreite geändert, die Sie als screen-xx definiert haben. Auf diese Weise kann ein solches Framework einmal codiert und dann vom Endbenutzer an seine Bedürfnisse angepasst werden.

Eine ähnliche Frage hier, die für mehr Klarheit sorgen könnte: Bootstrap 3.0-Medienabfragen

In Ihrem CSS müssen Sie weiterhin herkömmliche Medienabfragen verwenden, um die Vorgänge von Bootstrap zu überschreiben oder zu ergänzen.

In Bezug auf Ihre zweite Frage ist das kein Tippfehler. Sobald der Bildschirm unter 768px fällt, wird das Framework vollständig flüssig und passt die Größe bei jeder Gerätebreite an, sodass keine Haltepunkte mehr erforderlich sind. Der Haltepunkt bei 480px ist vorhanden, da bestimmte Änderungen am Layout für die mobile Optimierung vorgenommen werden.

Um dies in Aktion zu sehen, rufen Sie dieses Beispiel auf der entsprechenden Website auf ( http://getbootstrap.com/examples/navbar-fixed-top/ ) und ändern Sie die Größe Ihres Fensters, um zu sehen, wie das Design behandelt wird nach 768px.

38
Lance Turri

Dieses Problem wurde in https://github.com/twbs/bootstrap/issues/102 behandelt. Derzeit ist aus Kompatibilitätsgründen keine Änderung von Grid geplant.

Sie können Bootstrap von diesem Zweig abrufen, Zweig hs: https://github.com/antespi/bootstrap/tree/hs

Dieser Zweig gibt Ihnen einen zusätzlichen Haltepunkt bei 480px, daher müssen Sie:

  1. Design fürs Handy zuerst (XS, weniger als 480px)
  2. Fügen Sie Ihrem HTML-Code HS-Klassen (Horizontal Small Devices) hinzu: col-hs- *, visible-hs, ... und Design für horizontale Mobilgeräte (HS, weniger als 768px).
  3. Design für Tablet-Geräte (SM, weniger als 992px)
  4. Design für Desktop-Geräte (MD, weniger als 1200px)
  5. Design für große Geräte (LG, mehr als 1200px)

Mobiles Design ist der Schlüssel zum Verständnis von Bootstrap 3. Dies ist die wichtigste Änderung gegenüber BootStrap 2.x. Als Regelvorlage können Sie dies befolgen (in WENIGER):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}
23

Ich weiß, das ist ein bisschen alt, aber ich dachte, ich würde dazu beitragen. Auf der Grundlage der Antwort von @Sophy habe ich einen .xxs-Haltepunkt hinzugefügt. Ich habe mich nicht um sichtbare Inline-, table.visible-, etc-Klassen gekümmert.

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-Push-12 {
    left: 100%;
  }
  .col-xxs-Push-11 {
    left: 91.66666667%;
  }
  .col-xxs-Push-10 {
    left: 83.33333333%;
  }
  .col-xxs-Push-9 {
    left: 75%;
  }
  .col-xxs-Push-8 {
    left: 66.66666667%;
  }
  .col-xxs-Push-7 {
    left: 58.33333333%;
  }
  .col-xxs-Push-6 {
    left: 50%;
  }
  .col-xxs-Push-5 {
    left: 41.66666667%;
  }
  .col-xxs-Push-4 {
    left: 33.33333333%;
  }
  .col-xxs-Push-3 {
    left: 25%;
  }
  .col-xxs-Push-2 {
    left: 16.66666667%;
  }
  .col-xxs-Push-1 {
    left: 8.33333333%;
  }
  .col-xxs-Push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
7
Enrico

Der Verweis auf 480px wurde entfernt. Stattdessen heißt es:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Es gibt keinen Haltepunkt unter 768px in Bootstrap 3.

Wenn Sie den @screen-sm-min und andere Mixins verwenden möchten, müssen Sie mit LESS kompilieren (siehe http://getbootstrap.com/css/#grid-less )

Hier ist ein Tutorial zur Verwendung von Bootstrap 3 und LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

6
Anthony

Sie sollten in der Lage sein, diese Haltepunkte zu verwenden, wenn Sie http://lesscss.org/ verwenden, um Ihr CSS zu erstellen.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

From https://getbootstrap.com/docs/3.4/css/#grid-media-queries

Tatsächlich ist @screen-sm-min eine Variable, die beim Erstellen mit Less durch den in _variable angegebenen Wert ersetzt wird. Wenn Sie Less nicht verwenden, können Sie diese Variable durch den Wert ersetzen:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3 unterstützt offiziell Sass: https://github.com/twbs/bootstrap-sass . Wenn Sie Sass verwenden (und sollten), ist die Syntax etwas anders.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }
2
gagarine

Hier sind die Selektoren, die in Bootstrap 4 verwendet werden. In BS4 gibt es keine "niedrigste" Einstellung, da "extra klein" die Standardeinstellung ist. Das heißt Sie würden zuerst die XS-Größe codieren und diese Medien anschließend überschreiben.

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

wenn ich @media benutze (max-width: 768px), bricht mein Design auf 768px. Aber es ist in Ordnung auf 767px und 769px. Also, ich denke, es wird 767px als maximale Breite für kleine Geräte sein.

0
Xuwel Khan

für bootstrap 3 Ich habe den folgenden Code in meiner Navbar-Komponente

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

dann kannst du sowas benutzen

@media wide { selector: style }

Dabei wird der Wert verwendet, auf den die Variablen festgelegt sind.

Beim Escaping können Sie eine beliebige Zeichenfolge als Eigenschaft oder Variablenwert verwenden. Alles in ~ "irgendetwas" oder ~ "irgendetwas" wird unverändert verwendet, mit Ausnahme der Interpolation.

http://lesscss.org

0
Daniel