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-md
und @screen-lg
Namen 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 )
Antworten:
Bootstrap 4-Medienabfragen
Bootstrap 4 bietet Quell-CSS in Sass, das Sie über Sass Mixins einbinden können:
Bootstrap 3-Medienabfragen
Bootstrap 2.3.2 Medienabfragen
Ressource von: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
quelle
Bootstrap dokumentiert die Medienabfragen nicht sehr gut. Diese Variablen
@screen-sm
,@screen-md
,@screen-lg
beziehen 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.
quelle
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/hsDieser Zweig gibt Ihnen einen zusätzlichen Haltepunkt bei 480px, also müssen Sie:
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):
quelle
@screen-hs-min:@screen-xs;
. Warum nicht@screen-xs
direkt hier verwenden?min-width: @screen-hs-min
, wenn Sie eine Estraregel für SM benötigen, schreiben Sie sie einmin-width: @screen-sm-min
und 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 768pxscreen-hs-min
ist eine neue Regel zwischenscreen-xs-min
undscreen-sm-min
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.
quelle
.visible-xs-inline, .visible-xs-inline-block
Sie auch nicht die Klassen, wenn Sie überschreiben.visible-xs
!Der Verweis auf 480px wurde entfernt. Stattdessen heißt es:
In Bootstrap 3 gibt es keinen Haltepunkt unter 768px.
Wenn Sie die
@screen-sm-min
und andere Mixins verwenden möchten, müssen Sie mit LESS kompilieren, siehe http://getbootstrap.com/css/#grid-lessHier ist ein Tutorial zur Verwendung von Bootstrap 3 und WENIGER: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
quelle
Sie sollten in der Lage sein, diese Haltepunkte zu verwenden, wenn Sie http://lesscss.org/ zum Erstellen Ihres CSS verwenden.
Von https://getbootstrap.com/docs/3.4/css/#grid-media-queries
Tatsächlich
@screen-sm-min
handelt es sich um eine Variable, die durch den Wert ersetzt wird, der_variable
beim Erstellen mit Less angegeben wurde. Wenn Sie nicht Less verwenden, können Sie diese Variable durch den Wert ersetzen:Bootstrap 3 unterstützt offiziell Sass: https://github.com/twbs/bootstrap-sass . Wenn Sie Sass verwenden (und sollten), ist die Syntax etwas anders.
quelle
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.
quelle
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.
quelle
Für Bootstrap 3 habe ich den folgenden Code in meiner Navbar-Komponente
dann kannst du so etwas benutzen
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
quelle
quelle