In der Bootstrap 3 media queries Dokumentation heißt es:
Wir verwenden die folgenden Media-Queries in unseren Less-Dateien, um die wichtigsten Haltepunkte in unserem Rastersystem zu erstellen.
Extra kleine Geräte (Telefone, weniger als 768px): Keine Media Query, da dies der Standard in Bootstrap ist
Kleine Geräte (Tablets, 768px und mehr):
@media (min-width: @screen-sm-min) { ... }
Mittlere Geräte (Desktops, 992px und mehr):
@media (min-width: @screen-md-min) { ... }
Große Geräte (große Desktops, 1200px und mehr):
@media (min-width: @screen-lg-min) { ... }
Sollten wir in der Lage sein, die Namen @screen-sm
, @screen-md
und @screen-lg
auch in unseren Media-Queries zu verwenden? Weil es bei mir nicht funktioniert. Ich muss Pixelmaße wie @media (min-width: 768px) {...}
verwenden, bevor es funktioniert. Mache ich etwas falsch?
Ist der Hinweis auf 480px für besonders kleine Geräte ein Tippfehler? Müsste es nicht heißen: bis zu 767px? (since removed from the documentation)
Bootstrap dokumentiert die Media-Queries nicht sehr gut. Die Variablen "@screen-sm", "@screen-md" und "@screen-lg" beziehen sich eigentlich auf LESS-Variablen und nicht auf einfaches CSS.
Wenn Sie Bootstrap anpassen, können Sie die Media Query Breakpoints ändern, und beim Kompilieren werden die @screen-xx-Variablen auf die Pixelbreite geändert, die Sie als screen-xx definiert haben. Auf diese Weise kann ein Framework wie dieses einmal kodiert und dann vom Endbenutzer an seine Bedürfnisse angepasst werden.
Eine ähnliche Frage hier, die vielleicht mehr Klarheit schafft: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries
In Ihrem CSS müssen Sie immer noch traditionelle Media-Queries verwenden, um das, was Bootstrap tut, außer Kraft zu setzen oder zu ergänzen.
In Bezug auf Ihre zweite Frage, das ist nicht ein Tippfehler. Sobald der Bildschirm unter 768px geht, wird das Framework vollständig flüssig und passt die Größe an jede Gerätebreite an, wodurch die Notwendigkeit für Haltepunkte entfällt. Der Haltepunkt bei 480px existiert, weil es spezifische Änderungen gibt, die im Layout für die mobile Optimierung auftreten.
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 in https://github.com/twbs/bootstrap/issues/10203 diskutiert. Aus Kompatibilitätsgründen ist derzeit nicht geplant, Grid zu ändern.
Sie können Bootstrap von diesem Fork, Zweig hs
bekommen: https://github.com/antespi/bootstrap/tree/hs
Dieser Zweig gibt Ihnen einen zusätzlichen Haltepunkt bei 480px, so dass Sie es tun müssen:
Design mobile first ist der Schlüssel zum Verständnis von Bootstrap 3. Dies ist die wichtigste Änderung von BootStrap 2.x. Als Regelvorlage können Sie dies (in LESS) folgen:
.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) */
}
}
Der Hinweis 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 @screen-sm-min
und andere Mixins verwenden wollen, müssen Sie mit LESS kompilieren, siehe http://getbootstrap.com/css/#grid-less
Hier's ein Tutorial, wie man Bootstrap 3 und LESS benutzt: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial