Twitter Bootstrap 3: Wie verwende ich Medienabfragen?

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?

Rui
quelle
7
google "Medienabfragen" und überprüfen Sie, wie Bootstrap sie eingerichtet hat
koala_dev

Antworten:

651

Bootstrap 3

Hier sind die in BS3 verwendeten Selektoren, wenn Sie konsistent bleiben möchten:

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

Hinweis: Zu Ihrer Information, dies kann zum Debuggen nützlich sein:

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

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.

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

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.

William Entriken
quelle
116
Nur zu <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>
Ihrer Information
14
+1 für die Bestellung von Abfragen durch Erhöhen der Bildschirmgröße, wobei die Mobile-First-Methode von BS3 eingehalten wird.
Jake Berger
5
Was ist mit 480px (@ screen-xs)? Ist das später erschienen? Habe es von hier bekommen .
Brejoc
1
Um mit BS3 konsistent zu sein, verwenden Sie die Standardvariablen für die Bildschirmgröße für jedes Ansichtsfenster. Siehe: stackoverflow.com/a/24921600/2817112
Oriol
1
@brejoc BS3 + ist "mobile-first" - die "XS" (mobile) Ansicht ist die Standardansicht in BS3 + ...
jave.web
252

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:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}
Chris Clower
quelle
Hier werden nur Antworten mit hoher Abstimmung verwendet min-width, aber Sie haben auch verwendet. max-widthWas ist also der Unterschied? Ist dies erforderlich?
Shaijut
Woher weiß Bootstrap, ob sich das Telefon im Hochformat befindet?
SuperUberDuper
@ SuperUberDuper tut es nicht. Es werden nur Elemente behandelt, die der horizontalen Größe des Ansichtsfensters und nicht dem Bildschirmlayout entsprechen.
Chris Clower
Sollte die Bestellung nicht von LOW-to-HIGH sein?
Gefangener NULL
134

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:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

Darüber hinaus gibt es Variablen für @screen-sm-maxund @screen-md-max, die 1 Pixel ist kleiner als @screen-md-minund @screen-lg-minjeweils 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-maxusw.

Carpeliam
quelle
1
Wenn ich Daten auf .grid.less bearbeiten möchte, wird immer vom Hauptstil überschrieben. Gibt es eine Lösung oder ich brauche nur den ganzen Stil, den ich zu den Medienabfragen hinzugefügt habe, um! Wichtig hinzuzufügen?
Edonbajrami
2
Ich kann das nicht zum Laufen bringen. Der Compiler beschwert sich, wenn ich etwas anderes als eine fest codierte Nummer verwende.
Laertiaden
7
@JesseGoodfellow Das obige Beispiel verwendet WENIGER Syntax. wenn Sie SASS / SCSS verwenden github.com/twbs/bootstrap-sass/blob/master/vendor/assets/... , würden Sie $screen-xs-maxusw. (Und wenn Sie mit LESS / SCSS lokal , sondern die CSS - Version importieren von Bootstrap, Sie haben insgesamt
kein
2
@screen-tablet, @screen-desktopUnd @screen-lg-desktopveraltet. Vielleicht ist es an der Zeit, Ihre bereits beeindruckende Antwort zu aktualisieren. ;-)
Slipp D. Thompson
2
Angenommen, Sie erstellen einen Bootstrap. Dies sollte als Antwort markiert werden
Sidonaldson
44

Dies sind die Werte von Bootstrap3:

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}
Shlomia
quelle
4
Dies ist die richtige Antwort. Muss "und" Bedingungen haben
Jason Miller
Entfernen Sie die andBedingungen, 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.
Onimusha
29

Hier sind zwei Beispiele.

Sobald das Ansichtsfenster 700px breit oder weniger wird, machen Sie alle h1-Tags 20px.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Machen Sie alle 20px des h1, bis das Ansichtsfenster 700px oder größer erreicht.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Hoffe das hilft: 0)

Jeffpowrs
quelle
Sie verwenden font-size: 20pxfür h1Tags in beiden Fällen. Zum besseren Verständnis haben Sie möglicherweise andere font-sizeals die fraglichen verwendet. Übrigens ist es immer noch okay.
fWd82
21

Hier ist ein modulareres Beispiel, bei dem LESS verwendet wird, um Bootstrap nachzuahmen, ohne die weniger Dateien zu importieren.

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs only
@media(max-width: @screen-xs-max) {

}
//small and up
@media(min-width: @screen-sm-min) {

}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md and up
@media(min-width: @screen-md-min) {

}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg and up
@media(min-width: @screen-lg-min) {

}
Internet-Nico
quelle
Versuchte dies. Funktioniert perfekt!
Tomas Gonzalez
21

Basierend auf den Antworten der anderen Benutzer habe ich diese benutzerdefinierten Mixins zur einfacheren Verwendung geschrieben:

Weniger Input

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

Anwendungsbeispiel

body {
  .when-lg({
    background-color: red;
  });
}

SCSS-Eingang

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

Anwendungsbeispiel:

body {
  @include when-md {
    background-color: red;
  }
}

Ausgabe

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}
verdammt
quelle
20

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

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

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

Suleman C.
quelle
12

Oder einfacher Sass-Kompass:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

Beispiel:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}
user956584
quelle
Vielen Dank. Ich habe nach etwas gesucht, das Beispiele für das Bootstrap-Sass-Mixin enthält (das Bootstrap-eigene Beispiel ist mit dem gesamten Inhalt kompliziert). Das erklärt viel! :)
CleverNode
11

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.

@media(min-width:1200px){

    h1 {font-size:34px}

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

    h1 {font-size:32px}

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

    h1 {font-size:28px}

}
@media(max-width:767px){

    h1 {font-size:26px}

}

Beachten Sie auch, dass das 480-Ansichtsfenster in Bootstrap 3 gelöscht wurde.

Joshua Watson
quelle
6

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

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

siehe auch auf Bootstrap

csehasib
quelle
5

Sie können in meinem Beispiel sehen, dass sich Schriftgrößen und Hintergrundfarben je nach Bildschirmgröße ändern

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}
/* Custom, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>

Ganesh Putta
quelle
2

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.

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

base.less würde so aussehen

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

sm-min.less würde so aussehen

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

Ihr Index müsste nur den loader.less laden

<link rel="stylesheet/less" type="text/css" href="loader.less" />

kinderleicht..

blamb
quelle
Hallo, ich versuche weniger von 2 Tagen im Bootstrap zu verwenden, aber ich versuche es immer noch. Würdest du mir bitte helfen, weniger unter Windows zu verwenden? Ich habe viele Tuts und Artikel gelesen, aber keine richtigen Lösungen gefunden. Ich denke, Sie können mir helfen. Vielen Dank im Voraus
Muddasir Abbas
Sie müssen sicherstellen, dass Sie die weniger Javascript-Bibliothek einschließen, damit Ihre Anwendung weiß, was mit diesen Dateien zu tun ist. Wie Sie weniger in Ihre Bewerbung aufnehmen, liegt bei Ihnen. Ich benutze eine Bibliothek bei Github über Assetic. das musst du nicht tun. Sie können einfach die Javascript-Datei einfügen und dann Ihre weniger Datei über ein Standard-Meta-Tag im CSS-Stil laden. Sie machen sich keine Sorgen um das Kompilieren. Diese Info ist hier. lesscss.org/#client-side-usage .
Blamb
2

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, xsda dies die Standardeinstellung in Bootstrap ist

Kleine Geräte (Landschaftstelefone, 576px und höher)

@media (min-width: 576px) { ... }

Mittlere Geräte (Tablets, 768px und höher)

@media (min-width: 768px) { ... }

Große Geräte (Desktops, 992px und höher)

@media (min-width: 992px) { ... }

Extra große Geräte (große Desktops, 1200px und höher)

@media (min-width: 1200px) { ... }

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

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Um es genau zu verstehen, gehen Sie bitte den folgenden Link durch

https://getbootstrap.com/docs/4.3/layout/overview/

Purvi Barot
quelle
1

@media only screen und (max-width: 1200px) {}

@media only screen und (max-width: 979px) {}

@media only screen und (max-width: 767px) {}

@media only screen und (max-width: 480px) {}

@media only screen und (max-width: 320px) {}

@media (minimale Breite: 768 Pixel) und (maximale Breite: 991 Pixel) {}

@media (minimale Breite: 992 Pixel) und (maximale Breite: 1024 Pixel) {}

Ashu Designer
quelle
0

Verwenden Sie Medienabfragen für den Internet Explorer.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
Apps Tawale
quelle
0

:) :)

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:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

Dokumentation:

Viel Spaß beim Codieren;)

Luckylooke
quelle
-1

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.

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

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

Juanma Menendez
quelle