it-swarm.com.de

Twitter Bootstrap 3: Wie verwende ich Medienabfragen?

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?

365
Rui

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 für das 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.

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

Update 2019-02-11: BS3-Info ist ab Version 3.4.0 noch korrekt, BS4 für neues Grid aktualisiert, genau ab 4.3.0.

640

Basierend auf der Antwort von bisio und dem Code Bootstrap 3 konnte ich eine genauere Antwort für alle finden, die nur die gesamte Medienabfrage 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) {

}
251
Chris Clower

Wenn Sie LESS oder SCSS/SASS verwenden und eine LESS/SCSS-Version von Bootstrap verwenden, können Sie auch Variablen verwenden, vorausgesetzt, Sie haben Zugriff darauf. Eine WENIGER Übersetzung der Antwort von @ full-decent 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 */

Es gibt auch Variablen für @screen-sm-max und @screen-md-max, die 1 Pixel kleiner sind als @screen-md-min bzw. @screen-lg-min, typischerweise zur Verwendung mit @media(max-width).

BEARBEITEN: Wenn Sie SCSS/SASS verwenden, Variablen beginnen Sie mit einem $ anstelle eines @, also wäre es $screen-xs-max usw.

134
carpeliam

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){}
44
shlomia

Hier sind zwei Beispiele.

Sobald das Ansichtsfenster eine Breite von 700 Pixel oder weniger hat, müssen alle h1-Tags 20 Pixel groß sein.

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

29
Jeffpowrs

Hier ist ein modulareres Beispiel, in dem LESS verwendet wird, um Bootstrap zu imitieren, 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) {

}
20
internet-nico

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 extrahiert wurden, stammen aus den folgenden wenigen Dateien:

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.lesshttps://github.com/twbs/bootstrap/blob/ v3.3.6/less/variables.less

20
Suleman C

Basierend auf den Antworten der anderen Benutzer habe ich diese benutzerdefinierten Mixins geschrieben, um die Verwendung zu vereinfachen:

Weniger Eingabe

.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;
  }
}
19
damd

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;
    }
}
12
user956584

denken Sie daran, dass das Vermeiden der Textskalierung der Hauptgrund für die Existenz ansprechender Layouts ist. Die gesamte Logik hinter responsiven Sites besteht darin, funktionale Layouts zu erstellen, die Ihren Inhalt effektiv anzeigen, sodass er auf mehreren Bildschirmgrößen leicht lesbar und verwendbar ist.

Obwohl es in einigen Fällen erforderlich ist, Text zu skalieren, sollten Sie darauf achten, Ihre Site nicht zu verkleinern und den Punkt zu übersehen.

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}

}

Denken Sie auch daran, dass das 480-Ansichtsfenster in bootstrap 3 abgelegt wurde.

11
Joshua Watson

In unseren Less-Dateien verwenden wir die folgenden Medienabfragen, 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 unter Bootstrap

5
csehasib

in meinem Beispiel sehen Sie, 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>
4
Ganesh Putta

Hier finden Sie eine noch einfachere Lösung aus einer Hand, einschließlich separater Antwortdateien, die auf Medienabfragen basieren.

Dies ermöglicht, dass die gesamte Medienabfragelogik und die Einschlusslogik nur auf einer Seite, dem Ladeprogramm, vorhanden sein müssen. Sie können auch verhindern, dass die Medienabfragen die reagierenden Stylesheets selbst ü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..

2
blamb

@media nur Bildschirm und (maximale Breite: 1200px) {}

@media nur Bildschirm und (maximale Breite: 979px) {}

@media nur Bildschirm und (maximale Breite: 767px) {}

@media nur Bildschirm und (maximale Breite: 480px) {}

@media nur Bildschirm und (maximale Breite: 320px) {}

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

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

1
Ashu Designer

:)

In bootstrap (4.3.1) können Sie mit SCSS (SASS) eines von @mixin aus /bootstrap/scss/mixins/_breakpoints.scss verwenden.

Medien mit mindestens der Mindestbreite des Haltepunkts. Keine Abfrage nach dem kleinsten Haltepunkt. Lässt den @ -Inhalt auf den angegebenen Haltepunkt und breiter angewendet werden.

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

Medien mit höchstens der maximalen Haltepunktbreite. Keine Abfrage nach dem größten Haltepunkt. Bewirkt, dass der @ -Inhalt auf den angegebenen Haltepunkt angewendet wird und enger wird.

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

Medien, die sich über mehrere Haltepunktbreiten erstrecken. Lässt den @ -Inhalt zwischen den minimalen und maximalen Haltepunkten gelten

@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 und kein Maximum für den größten Haltepunkt. Lässt den @ -Inhalt nur auf den angegebenen Haltepunkt zutreffen, nicht auf Ansichtsfenster, die breiter oder enger sind.

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

Fröhliches Codieren;)

0
Luckylooke

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) {
}
0
Apps Tawale