Ich verwende Bootstrap 3, um ein ansprechendes Layout zu erstellen, in dem ich einige Schriftgrößen entsprechend der Bildschirmgröße anpassen möchte. Wie kann ich Medienabfragen verwenden, um diese Art von Logik zu erstellen?
371
Ich verwende Bootstrap 3, um ein ansprechendes Layout zu erstellen, in dem ich einige Schriftgrößen entsprechend der Bildschirmgröße anpassen möchte. Wie kann ich Medienabfragen verwenden, um diese Art von Logik zu erstellen?
Antworten:
Bootstrap 3
Hier sind die in BS3 verwendeten Selektoren, wenn Sie konsistent bleiben möchten:
Hinweis: Zu Ihrer Information, dies kann zum Debuggen nützlich sein:
Bootstrap 4
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.
Update 2019-02-11: BS3-Informationen sind ab Version 3.4.0 noch korrekt, BS4 für neues Raster aktualisiert, ab 4.3.0 korrekt.
quelle
<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>
Basierend auf der Antwort von bisio und dem Bootstrap 3-Code konnte ich eine genauere Antwort für alle finden, die nur den vollständigen Medienabfragesatz kopieren und in ihr Stylesheet einfügen möchten:
quelle
min-width
, aber Sie haben auch verwendet.max-width
Was ist also der Unterschied? Ist dies erforderlich?Wenn Sie WENIGER oder SCSS / SASS verwenden und eine WENIGER / SCSS-Version von Bootstrap verwenden, können Sie auch Variablen verwenden , sofern Sie Zugriff darauf haben. Eine WENIGER Übersetzung der Antwort von @ full-anständig wäre wie folgt:
Darüber hinaus gibt es Variablen für
@screen-sm-max
und@screen-md-max
, die 1 Pixel ist kleiner als@screen-md-min
und@screen-lg-min
jeweils typischerweise für die Verwendung mit@media(max-width)
.BEARBEITEN: Wenn Sie SCSS / SASS verwenden, beginnen Variablen mit a
$
anstelle von a@
, also wäre es$screen-xs-max
usw.quelle
$screen-xs-max
usw. (Und wenn Sie mit LESS / SCSS lokal , sondern die CSS - Version importieren von Bootstrap, Sie haben insgesamt@screen-tablet
,@screen-desktop
Und@screen-lg-desktop
veraltet. Vielleicht ist es an der Zeit, Ihre bereits beeindruckende Antwort zu aktualisieren. ;-)Dies sind die Werte von Bootstrap3:
quelle
and
Bedingungen, damit große Bildschirme das CSS aus dem mittleren Bildschirm verwenden können. @ JasonMiller, es ist also nicht unbedingt ein "Muss", es hängt von den Spezifikationen und den Anforderungen der Vorlage ab.Hier sind zwei Beispiele.
Sobald das Ansichtsfenster 700px breit oder weniger wird, machen Sie alle h1-Tags 20px.
Machen Sie alle 20px des h1, bis das Ansichtsfenster 700px oder größer erreicht.
Hoffe das hilft: 0)
quelle
font-size: 20px
fürh1
Tags in beiden Fällen. Zum besseren Verständnis haben Sie möglicherweise anderefont-size
als die fraglichen verwendet. Übrigens ist es immer noch okay.Hier ist ein modulareres Beispiel, bei dem LESS verwendet wird, um Bootstrap nachzuahmen, ohne die weniger Dateien zu importieren.
quelle
Basierend auf den Antworten der anderen Benutzer habe ich diese benutzerdefinierten Mixins zur einfacheren Verwendung geschrieben:
Weniger Input
Anwendungsbeispiel
SCSS-Eingang
Anwendungsbeispiel:
Ausgabe
quelle
Ab Bootstrap v3.3.6 werden die folgenden Medienabfragen verwendet, die der Dokumentation entsprechen, in der die verfügbaren Antwortklassen aufgeführt sind ( http://getbootstrap.com/css/#responsive-utilities ).
Medienabfragen, die aus dem Bootstrap GitHub-Repository aus den folgenden weniger Dateien extrahiert wurden: -
https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less
quelle
Oder einfacher Sass-Kompass:
Beispiel:
quelle
Beachten Sie, dass das Vermeiden der Textskalierung der Hauptgrund dafür ist, dass reaktionsschnelle Layouts vorhanden sind. Die gesamte Logik hinter reaktionsfähigen Websites besteht darin, funktionale Layouts zu erstellen, die Ihre Inhalte effektiv anzeigen, sodass sie auf mehreren Bildschirmgrößen leicht lesbar und verwendbar sind.
Obwohl es in einigen Fällen erforderlich ist, Text zu skalieren, achten Sie darauf, Ihre Site nicht zu verkleinern und den Punkt zu verfehlen.
Hier ist sowieso ein Beispiel.
Beachten Sie auch, dass das 480-Ansichtsfenster in Bootstrap 3 gelöscht wurde.
quelle
Wir verwenden die folgenden Medienabfragen in unseren Less-Dateien, um die wichtigsten Haltepunkte in unserem Rastersystem zu erstellen.
siehe auch auf Bootstrap
quelle
quelle
Hier finden Sie eine noch einfachere Lösung aus einer Hand, einschließlich separater Responsive-Dateien, die auf Medienabfragen basieren.
Dadurch muss die gesamte Medienabfragelogik und Include-Logik nur auf einer Seite, dem Loader, vorhanden sein. Außerdem können die Medienabfragen die reaktionsschnellen Stylesheets selbst nicht überladen.
base.less würde so aussehen
sm-min.less würde so aussehen
Ihr Index müsste nur den loader.less laden
kinderleicht..
quelle
Bootstrap verwendet in erster Linie die folgenden Medienabfragebereiche - oder Haltepunkte - in unseren Quell-Sass-Dateien für unser Layout, unser Rastersystem und unsere Komponenten.
Extra kleine Geräte (Hochformat-Telefone, weniger als 576 Pixel) Keine Medienabfrage,
xs
da dies die Standardeinstellung in Bootstrap istKleine Geräte (Landschaftstelefone, 576px und höher)
Mittlere Geräte (Tablets, 768px und höher)
Große Geräte (Desktops, 992px und höher)
Extra große Geräte (große Desktops, 1200px und höher)
Da wir unser Quell-CSS in Sass schreiben, sind alle unsere Medienabfragen über Sass-Mixins verfügbar:
Für den xs-Haltepunkt ist keine Medienabfrage erforderlich, da dies effektiv ist
@media (min-width: 0) { ... }
Um es genau zu verstehen, gehen Sie bitte den folgenden Link durch
https://getbootstrap.com/docs/4.3/layout/overview/
quelle
quelle
Verwenden Sie Medienabfragen für den Internet Explorer.
quelle
:) :)
Im neuesten Bootstrap (4.3.1) können Sie mit SCSS (SASS) eines von @mixin von verwenden
/bootstrap/scss/mixins/_breakpoints.scss
Medien mit mindestens der minimalen Haltepunktbreite. Keine Abfrage nach dem kleinsten Haltepunkt. Lässt den @ -Inhalt auf den angegebenen Haltepunkt und darüber hinaus angewendet werden.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
Medien mit höchstens der maximalen Haltepunktbreite. Keine Abfrage nach dem größten Haltepunkt. Lässt den @ -Inhalt auf den angegebenen Haltepunkt angewendet und enger werden.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
Medien, die mehrere Haltepunktbreiten umfassen. Lässt den @ -Inhalt zwischen den minimalen und maximalen Haltepunkten angewendet werden
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
Medien zwischen der minimalen und der maximalen Breite des Haltepunkts. Kein Minimum für den kleinsten Haltepunkt und kein Maximum für den größten. Lässt den @ -Inhalt nur auf den angegebenen Haltepunkt angewendet werden, nicht auf breitere oder schmalere Ansichtsfenster.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
Zum Beispiel:
Dokumentation:
Viel Spaß beim Codieren;)
quelle
So verbessern Sie die Hauptreaktion:
Sie können die Verwendung Medien - Attribut des
<link>
Tags (es unterstützen Medienanfragen) downloaden , um nur den Code der Benutzer benötigt.Damit wird der Browser alle CSS - Ressourcen herunterladen, unabhängig von dem Medien - Attribute. Der Unterschied besteht darin, dass, wenn die Medienabfrage des Medienattributs als falsch ausgewertet wird, diese CSS-Datei und sein Inhalt nicht gerendert werden.
Daher wird empfohlen , die verwenden Medien - Attribut im
<link>
Tag , da es eine bessere Benutzererfahrung garantiert.Hier können Sie einen Google-Artikel zu diesem Problem lesen: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
Einige Tools, mit denen Sie die Trennung Ihres CSS-Codes in verschiedene Dateien gemäß Ihren Medienabfragen automatisieren können
Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS https://www.npmjs.com/package/postcss-extract-media-query
quelle