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

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

Extra kleine Geräte (Telefone mit weniger als 768 Pixel): 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 in der Lage sein , die zu verwenden @screen-sm, @screen-mdund @screen-lgNamen in unseren Medien - Anfragen als auch? Weil es bei mir nicht funktioniert. Ich muss Pixelmessungen verwenden, wie @media (min-width: 768px) {...}bevor es funktioniert. Mache ich etwas falsch?

Ist der Verweis auf 480px für extra kleine Geräte auch ein Tippfehler? Sollte das nicht bis zu 767px sagen? ( da aus der Dokumentation entfernt )

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

Bootstrap dokumentiert die Medienabfragen nicht sehr gut. Diese Variablen @screen-sm, @screen-md, @screen-lgbeziehen sich eigentlich auf LESS Variablen und nicht einfach CSS.

Wenn Sie Bootstrap anpassen, können Sie die Haltepunkte für Medienabfragen ä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 Funktionen 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 ändert die Größe bei jeder Gerätebreite, sodass keine Haltepunkte mehr erforderlich sind. Der Haltepunkt bei 480px ist vorhanden, da bestimmte Änderungen am Layout für die mobile Optimierung vorgenommen wurden.

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

Dieses Problem wurde unter https://github.com/twbs/bootstrap/issues/10203 erläutert. Aus Kompatibilitätsgründen ist derzeit keine Änderung des Grids geplant.

Sie können Bootstrap von dieser Verzweigung erhalten, Zweig hs: https://github.com/antespi/bootstrap/tree/hs

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

1. Design zuerst für Handys (XS, weniger als 480px)
2. Fügen Sie HS-Klassen (Horizontal Small Devices) in Ihr HTML ein: col-hs- *, visible-hs, ... und entwerfen Sie für horizontale mobile Gerä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)

Design Mobile First ist der Schlüssel zum Verständnis von Bootstrap 3. Dies ist die wichtigste Änderung gegenüber BootStrap 2.x. In der Regel können Sie dies folgen (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) */
    }
}

Ich weiß, dass dies ein bisschen alt ist, aber ich dachte, ich würde dazu beitragen. Basierend auf der Antwort von @Sophy habe ich Folgendes getan, um einen .xxs-Haltepunkt hinzuzufügen. Ich habe mich nicht um sichtbare Inline-, table.visible- usw. 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) {

}

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 */

In Bootstrap 3 gibt es keinen Haltepunkt unter 768px.

Wenn Sie die @screen-sm-minund 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 WENIGER: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Sie sollten in der Lage sein, diese Haltepunkte zu verwenden, wenn Sie http://lesscss.org/ zum Erstellen Ihres CSS verwenden.

/* 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) {  }

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

Tatsächlich @screen-sm-minhandelt es sich um eine Variable, die durch den Wert ersetzt wird, der _variablebeim Erstellen mit Less angegeben wurde. Wenn Sie nicht Less 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) {  }

Hier sind die in Bootstrap 4 verwendeten Selektoren. 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 lassen.

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

Wenn ich @media (max-width: 768px) verwende, bricht mein Design auf 768px. Aber es ist ok auf 767px und auch auf 769px. Ich denke also, dass es 767px als maximale Breite für das Targeting kleiner Geräte sein wird.

Für Bootstrap 3 habe ich 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 so etwas benutzen

@media wide { selector: style }

Dies verwendet den Wert, auf den Sie die Variablen eingestellt haben.

Beim Escaping können Sie eine beliebige Zeichenfolge als Eigenschaft oder Variablenwert verwenden. Alles in ~ "irgendetwas" oder ~ 'irgendetwas' wird so verwendet, wie es ist, ohne Änderungen außer Interpolation.

http://lesscss.org

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

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}