Sto usando Bootstrap 3 per costruire un layout reattivo in cui voglio regolare alcune dimensioni del carattere in base alle dimensioni dello schermo. Come posso utilizzare le query multimediali per creare questo tipo di logica?

Bootstrap 3

Ecco i selettori utilizzati in BS3, se vuoi rimanere coerente:

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

Nota: Cordiali saluti, questo può essere utile per il debug:

<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

Ecco i selettori utilizzati in BS4. Non esiste alcuna impostazione "più bassa" in BS4 perché "extra small" è l'impostazione predefinita. Vale a dire che dovresti prima codificare la dimensione XS e quindi avere queste sostituzioni successive.

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

Aggiornamento 2019-02-11: le informazioni BS3 sono ancora accurate dalla versione 3.4.0, aggiornate BS4 per la nuova griglia, accurate alla 4.3.0.

Basato sulla risposta di bisio e sul codice Bootstrap 3, sono stato in grado di trovare una risposta più accurata per chiunque volesse semplicemente copiare e incollare il set completo di query multimediali nel proprio foglio di stile:

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

}

Se stai usando LESS o SCSS / SASS e stai usando una versione LESS / SCSS di Bootstrap, puoi usare anche le variabili , a condizione che tu abbia accesso ad esse. Una MENO traduzione della risposta di @ full-decent sarebbe la seguente:

@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 */

Ci sono anche variabili per @screen-sm-maxe @screen-md-max, che sono 1 pixel in meno di @screen-md-mine @screen-lg-min, rispettivamente, in genere per l'uso con @media(max-width).

EDIT: Se stai usando SCSS / SASS, le variabili iniziano con un $invece di a @, quindi sarebbe $screen-xs-maxecc.

Questi sono i valori di 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){}

Ecco due esempi.

Una volta che la finestra diventa larga 700px o meno, imposta tutti i tag h1 20px.

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

Rendi tutti i 20px di h1 fino a quando il viewport raggiunge 700px o più.

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

Spero che questo aiuti: 0)

Ecco un esempio più modulare che utilizza LESS per imitare Bootstrap senza importare meno file.

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

}

Sulla base delle risposte degli altri utenti, ho scritto questi mixin personalizzati per un utilizzo più semplice:

Meno 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(); } }

Esempio di utilizzo

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

Ingresso SCSS

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

Esempio di utilizzo:

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

Produzione

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

A partire da Bootstrap v3.3.6 vengono utilizzate le seguenti media query che corrispondono alla documentazione che delinea le classi responsive disponibili ( 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) {}

Query multimediali estratte dal repository Bootstrap GitHub dai seguenti meno file: -

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

O semplice Sass-Compass:

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

Esempio:

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

tieni presente che evitare il ridimensionamento del testo è il motivo principale per cui esistono layout reattivi. l'intera logica dietro i siti responsive è quella di creare layout funzionali che visualizzino efficacemente i tuoi contenuti in modo che siano facilmente leggibili e utilizzabili su schermi di dimensioni multiple.

Sebbene sia necessario ridimensionare il testo in alcuni casi, fai attenzione a non miniaturizzare il tuo sito e non perdere il punto.

ecco un esempio comunque.

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

}

Ricorda inoltre che il viewport 480 è stato eliminato in bootstrap 3.

Usiamo le seguenti media query nei nostri file Less per creare i punti di interruzione chiave nel nostro sistema a griglia.

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

vedi anche su Bootstrap

puoi vedere nel mio esempio le dimensioni dei caratteri e i colori dello sfondo cambiano in base alle dimensioni dello schermo

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

Ecco una soluzione one stop ancora più semplice, inclusi file responsive separati basati su query multimediali.

Ciò consente a tutta la logica di query multimediale e include la logica di esistere solo su una pagina, il caricatore. Inoltre, consente di evitare che le query multimediali ingombrino i fogli di stile reattivi stessi.

//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 sarebbe simile a questo

/**
* 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 sarebbe simile a questo

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

il tuo indice dovrebbe solo caricare loader.less

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

vai tranquillo..

Bootstrap utilizza principalmente i seguenti intervalli di query multimediali (o punti di interruzione) nei nostri file Sass di origine per il nostro layout, sistema di griglia e componenti.

Dispositivi extra piccoli (telefoni verticali, meno di 576px) Nessuna query multimediale per xspoiché questa è l'impostazione predefinita in Bootstrap

Piccoli dispositivi (telefoni panoramici, 576 px e oltre)

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

Dispositivi medi (tablet, 768 px e oltre)

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

Dispositivi di grandi dimensioni (desktop, 992 px e oltre)

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

Dispositivi extra-large (desktop di grandi dimensioni, da 1200 px e oltre)

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

Poiché scriviamo il nostro CSS di origine in Sass, tutte le nostre query multimediali sono disponibili tramite i mixin Sass:

Nessuna query multimediale necessaria per il breakpoint xs in quanto efficace @media (min-width: 0) { ... }

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

Per capirlo a fondo, si prega di passare attraverso il link qui sotto

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

@media solo schermo e (larghezza massima: 1200px) {}

@media solo schermo e (larghezza massima: 979px) {}

@media solo schermo e (larghezza massima: 767px) {}

@media solo schermo e (larghezza massima: 480px) {}

@media solo schermo e (larghezza massima: 320px) {}

@media (larghezza minima: 768px) e (larghezza massima: 991px) {}

@media (larghezza minima: 992px) e (larghezza massima: 1024px) {}

Usa media query per IE;

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

:)

Nell'ultimo bootstrap (4.3.1), usando SCSS (SASS) è possibile utilizzare uno dei @mixin di /bootstrap/scss/mixins/_breakpoints.scss

Supporti con almeno la larghezza minima del punto di interruzione. Nessuna query per il punto di interruzione più piccolo. Rende il @content applicabile al breakpoint dato e più ampio.

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

Media al massimo della larghezza massima del punto di interruzione. Nessuna query per il punto di interruzione più grande. Rende il @content applicabile al breakpoint dato e più stretto.

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

Supporti che si estendono su più larghezze di breakpoint. Fa applicare @content tra i punti di interruzione minimo e massimo

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

Media tra la larghezza minima e massima del punto di interruzione. Nessun minimo per il punto di interruzione più piccolo e nessun massimo per il più grande. Rende il @content valido solo per il punto di interruzione dato, non le finestre più larghe o più strette.

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

Per esempio:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

Documentazione:

• intro https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• migrazione https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• variabili https://getbootstrap.com/docs/4.3/layout/grid/#variables

Buona codifica;)

Per migliorare la risposta principale:

È possibile utilizzare l' attributo multimediale del <link>tag (supporta le query multimediali) per scaricare solo il codice di cui l'utente ha bisogno.

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

Con questo, il browser scaricherà tutte le risorse CSS, indipendentemente dall'attributo media . La differenza è che se la media query dell'attributo media viene valutata su false allora quel file .css e il suo contenuto non saranno bloccati dal rendering.

Pertanto, si consiglia di utilizzare l' attributo media nel <link>tag poiché garantisce una migliore esperienza utente.

Qui puoi leggere un articolo di Google su questo problema https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Alcuni strumenti che ti aiuteranno ad automatizzare la separazione del tuo codice css in diversi file in base ai tuoi quesiti multimediali

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