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?

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.

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

}

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.

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

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)

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

}

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

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

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

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.

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

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>

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

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/

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

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

:) :)

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:

• Intro https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• Migration https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• Variablen https://getbootstrap.com/docs/4.3/layout/grid/#variables

Viel Spaß beim Codieren;)

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