Bootstrap 3-Haltepunkte und Medienabfragen

169

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 )

Kris Hunt
quelle
Hier sind die in BS4 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 (Mindestbreite: 576 Pixel) {} @media (Mindestbreite: 768 Pixel) {} @media (Mindestbreite: 992 Pixel) {} @media (Mindestbreite: 1200 Pixel) {}
Babbandeep Singh

Antworten:

203

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

Sophy
quelle
8
@ CyrilDuchon-Doris, die Frage war über Bootstrap 3 ... also denke ich nicht.
Bagata
12
Die Antwort wurde mit 30 Punkten bewertet und erwähnt Bootstrap 2. Viele Leute werden es sich ansehen, auch wenn sie Bootstrap 3 nicht verwenden. Ich bin immer sehr dankbar für Leute, die ihre eigene Antwort mit aktuellen Informationen bearbeiten, auch wenn sie etwas veraltet sind des anfänglichen Umfangs.
Cyril Duchon-Doris
Ist extra klein etwas unter 479?
SuperUberDuper
2
Bootstrap v4 ist noch nicht einmal stabil. Ist dir das bewusst? Die Antwort muss möglicherweise viele Male aktualisiert werden, bevor eine stabile Version erreicht wird.
Gherman
Ich glaube, hier gibt es den Ein-Pixel-Fehler, der tatsächlich Auswirkungen haben kann. Bei Bildschirmen mit 1200 und 320 Pixel werden sowohl die maximale als auch die minimale Medienabfrage wirksam. Alle maximalen Medienabfragen sollten minus 1 Pixel sein (z. B. 1199 Pixel). Die minimalen und maximalen 320px-Medienabfragen sind für mich nicht wirklich sinnvoll, da AFAIK-Bildschirme praktisch bei 320px beginnen.
Ben Carp
39

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.

Lance Turri
quelle
6
Um dies in Aktion zu sehen, gehen Sie zu diesem Beispiel auf ihrer Website und ändern Sie die Größe Ihres Fensters, um zu sehen, wie das Design nach 768px behandelt wird. // Was hat das mit 480px zu tun? Ich sehe bei 480 Pixeln nichts anderes als beispielsweise 500px.
Kris Hunt
In Bezug auf die natürliche Erweiterung des variablen Systems von Bootstrap 3 sollte dies die akzeptierte Antwort sein, da dies ein sehr effizienter Ansatz ist.
Klewis
28

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) */
    }
}
Antonio Espinosa
quelle
1
Entschuldigung, ich verstehe den Mehrwert dieser Gabel nicht. Wie ich verstehe, tust du es @screen-hs-min:@screen-xs;. Warum nicht @screen-xsdirekt hier verwenden?
Bass Jobsen
Nur zum besseren Verständnis. Diese Variable verleiht der Vorlage eine visuelle Konsistenz. Bootstrap 3 ist Mobile First, daher gelten alle Regeln außerhalb der Medienabfrage für die mobile Größe. Wenn Sie dann eine zusätzliche Regel für HS benötigen, schreiben Sie diese auf min-width: @screen-hs-min, wenn Sie eine Estraregel für SM benötigen, schreiben Sie sie ein min-width: @screen-sm-minund so weiter. Diese Gabel wird verwendet, um einen neuen Haltepunkt bei 480px hinzuzufügen. Dann ist die mobile Größe unter 480px und eine neue Größe (HS) erscheint zwischen 480px und 768px
Antonio Espinosa
Beachten Sie, dass die Vorlage einen kleinen Tippfehler enthält. screen-hs-min sollte screen-xs-min sein
eflat
@eflat Dies ist kein Tippfehler, screen-hs-minist eine neue Regel zwischen screen-xs-minundscreen-sm-min
Antonio Espinosa
7

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) {

}
Enrico
quelle
1
Genau das, was ich brauchte, danke! Also muss ich es nicht noch einmal machen :)
Antoni
Vergessen .visible-xs-inline, .visible-xs-inline-blockSie auch nicht die Klassen, wenn Sie überschreiben .visible-xs!
Antoni
6

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

Anthony
quelle
2

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) {  }
gagarine
quelle
1

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){}
Babbandeep Singh
quelle
0

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.

Xuwel Khan
quelle
0

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

Daniel
quelle
-6
@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) {



}
Dänische KT
quelle