Twitter Bootstrap 3: come utilizzare le query multimediali?


Risposte:


651

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.


116
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>
William Entriken,

14
+1 per ordinare query aumentando le dimensioni dello schermo, rimanendo coerenti con la metodologia mobile-first di BS3.
Jake Berger,

5
Che dire di 480px (@ screen-xs)? È apparso più tardi? Capito da qui .
brejoc,

1
Per essere coerenti con BS3, utilizzare le variabili di dimensioni dello schermo predefinite per ogni finestra. Vedi: stackoverflow.com/a/24921600/2817112
Oriol

1
@brejoc BS3 + è "mobile-first" - la vista "XS" (mobile) è la vista predefinita in BS3 + ...
jave.web

252

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

}

Qui la risposta più votata utilizza solo min-width, ma hai max-widthanche usato , quindi qual è la differenza? È necessario?
shaijut,

Come fa il bootstrap a sapere se il telefono è in modalità verticale?
SuperUberDuper

@SuperUberDuper non lo è. Gestisce solo gli elementi in base alle dimensioni orizzontali della finestra anziché al layout dello schermo.
Chris Clower,

L'ordine non dovrebbe essere da BASSO a ALTO?
Prigioniero ZERO,

134

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.


1
Quando voglio modificare i dati su .grid.less è sempre sovrascritto dallo stile principale. C'è qualche soluzione o ho solo bisogno di aggiungere tutto lo stile che ho aggiunto alle query multimediali! Important?
edonbajrami,

2
Non riesco a farlo funzionare. Il compilatore si lamenta se uso qualcosa oltre a un numero hardcoded.
Laertiades,

7
@JesseGoodfellow l'esempio sopra usa la sintassi MENO; se stai usando SASS / SCSS github.com/twbs/bootstrap-sass/blob/master/vendor/assets/… , vorresti $screen-xs-maxecc. (E se stai usando LESS / SCSS localmente ma stai importando la versione CSS di Bootstrap, sei completamente sfortunato.)
carpeliam,

2
@screen-tablet, @screen-desktope @screen-lg-desktopsono stati deprecati. Potrebbe essere il momento di aggiornare la tua già fantastica risposta. ;-)
Slipp D. Thompson,

2
Supponendo che tu stia costruendo bootstrap; questa dovrebbe essere contrassegnata come risposta
sidonaldson,

44

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

4
Questa è la risposta corretta Deve avere condizioni "e"
Jason Miller l'

Per consentire agli schermi di grandi dimensioni di utilizzare i CSS da CSS di schermo medio, rimuovere le andcondizioni. @JasonMiller quindi non è esattamente un "must", dipende dalle specifiche e dai requisiti del modello.
Onimusha,

29

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)


Si utilizza font-size: 20pxper i h1tag in entrambi i casi. Per una migliore comprensione potresti aver usato diversi font-sizecome richiesto. A proposito, va ancora bene.
fWd82,

21

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

}

Ho provato questo. Funziona perfettamente!
Tomas Gonzalez,

21

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

20

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


12

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

Grazie. Stavo cercando qualcosa che fornisca esempi del mix di bootstrap sass (l'esempio di bootstrap è complicato da tutto il contenuto). Questo spiega molto! :)
CleverNode,

11

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.


6

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


5

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>


2

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


Ciao, sto provando a usare meno da 2 giorni nel bootstrap ma sto ancora provando. mi può aiutare per quanto riguarda meno l'utilizzo su Windows. ho letto molti tutorial e articoli ma non ho trovato le soluzioni adeguate, penso che tu possa aiutarmi. Grazie in anticipo
Muddasir Abbas,

devi assicurarti di includere meno librerie javascript, quindi la tua applicazione saprà cosa fare con quei file. il modo in cui includi meno nella tua domanda dipende da te. uso una libreria trovata su github, tramite assetic. non devi farlo. puoi semplicemente includere il file javascript e quindi caricare il tuo file meno tramite un meta tag standard in stile CSS. non ti preoccupare per la compilazione. quell'informazione è qui. lesscss.org/#client-side-usage .
blamb

2

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/


1

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


0

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

0

:)

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:

Buona codifica;)


-1

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.