Nella documentazione relativa alle query multimediali Bootstrap 3 è indicato:

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

Dispositivi extra piccoli (telefoni, meno di 768 px): nessuna query multimediale poiché questa è l'impostazione predefinita in Bootstrap

Piccoli dispositivi (tablet, 768 px e superiori): @media (min-width: @screen-sm-min) { ... }

Dispositivi medi (desktop, 992 px e superiori): @media (min-width: @screen-md-min) { ... }

Dispositivi di grandi dimensioni (desktop di grandi dimensioni, da 1200 px e oltre): @media (min-width: @screen-lg-min) { ... }

Dovremmo essere in grado di utilizzare i @screen-sm, @screen-mdei @screen-lgnomi nelle nostre domande dei media come bene? Perché non funziona per me. Devo usare misure di pixel come @media (min-width: 768px) {...}prima che funzionino. Sto facendo qualcosa di sbagliato?

Inoltre, il riferimento a 480 px per dispositivi extra piccoli è un errore di battitura? Non dovrebbe dire fino a 767px? ( poiché rimosso dalla documentazione )

Bootstrap 4 Media query

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4 fornisce CSS di origine in Sass che puoi includere tramite Sass Mixins:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Bootstrap 3 Media query

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Bootstrap 2.3.2 Media query

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

}

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

}

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

}

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

}

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

}

Risorsa da: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap non documenta molto bene le query multimediali. Quelle variabili di@screen-sm , @screen-md, @screen-lgsono in realtà riferimento a variabili di meno e non è semplice CSS.

Quando si personalizza Bootstrap, è possibile modificare i punti di interruzione della query multimediale e durante la compilazione le variabili @ screen-xx vengono modificate in qualsiasi larghezza di pixel definita come screen-xx. Ecco come un framework come questo può essere codificato una volta e quindi personalizzato dall'utente finale per adattarsi alle sue esigenze.

Una domanda simile qui che potrebbe fornire maggiore chiarezza: query multimediali Bootstrap 3.0

Nel tuo CSS, dovrai comunque utilizzare le media query tradizionali per sovrascrivere o aggiungere ciò che Bootstrap sta facendo.

Per quanto riguarda la tua seconda domanda, questo non è un errore di battitura. Una volta che lo schermo scende al di sotto di 768 px, il framework diventa completamente fluido e si ridimensiona a qualsiasi larghezza del dispositivo, eliminando la necessità di punti di interruzione. Il punto di interruzione a 480 px esiste perché si verificano modifiche specifiche al layout per l'ottimizzazione mobile.

Per vederlo in azione, vai a questo esempio sul loro sito ( http://getbootstrap.com/examples/navbar-fixed-top/ ) e ridimensiona la finestra per vedere come tratta il design dopo 768px.

Questo problema è stato discusso in https://github.com/twbs/bootstrap/issues/10203 Ormai non è in programma alcuna modifica della griglia per motivi di compatibilità.

Puoi ottenere Bootstrap da questo fork, ramo hs: https://github.com/antespi/bootstrap/tree/hs

Questo ramo ti dà un breakpoint extra a 480px, quindi devi:

1. Progettare innanzitutto per dispositivi mobili (XS, meno di 480 px)
2. Aggiungi classi HS (Horizontal Small Devices) nel tuo HTML: col-hs- *, visible-hs, ... e design per dispositivi mobili orizzontali (HS, meno di 768px)
3. Design per dispositivi tablet (SM, inferiore a 992px)
4. Design per dispositivi desktop (MD, meno di 1200px)
5. Design per dispositivi di grandi dimensioni (LG, oltre 1200px)

Progettare prima i dispositivi mobili è la chiave per comprendere Bootstrap 3. Questa è la principale modifica rispetto a BootStrap 2.x. Come modello di regola puoi seguire questo (in MENO):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}

So che è un po 'vecchio, ma ho pensato che avrei contribuito. Basandomi sulla risposta di @Sophy, questo è quello che ho fatto per aggiungere un breakpoint .xxs. Non mi sono occupato delle classi visibile-inline, table.visible, ecc.

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Il riferimento a 480px è stato rimosso. Invece dice:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Non esiste un punto di interruzione inferiore a 768 px in Bootstrap 3.

Se si desidera utilizzare il @screen-sm-mine altri mixin, è necessario compilare con MENO, vedere http://getbootstrap.com/css/#grid-less

Ecco un tutorial su come utilizzare Bootstrap 3 e MENO: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Dovresti essere in grado di usare quei punti di interruzione se usi http://lesscss.org/ per costruire il tuo CSS.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

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

Da https://getbootstrap.com/docs/3.4/css/#grid-media-queries

In effetti @screen-sm-minè una variabile che viene sostituita dal valore specificato in _variablequando si crea con Less. Se non si utilizza Less, è possibile sostituire questa variabile con il valore:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3 supporta ufficialmente Sass: https://github.com/twbs/bootstrap-sass . Se stai usando Sass (e dovresti) la sintassi è leggermente diversa.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

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

Ecco i selettori utilizzati in Bootstrap 4. 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){}

quando uso @media (larghezza massima: 768 px) il mio design si interrompe su 768 px. Ma va bene su 767px e anche su 769px. Quindi, penso che sarà 767 px come larghezza massima per il targeting di piccoli dispositivi.

per bootstrap 3 ho il seguente codice nel mio componente navbar

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

allora puoi usare qualcosa di simile

@media wide { selector: style }

Questo utilizza qualunque valore tu abbia impostato le variabili.

L'escaping ti consente di utilizzare qualsiasi stringa arbitraria come proprietà o valore variabile. Qualunque cosa all'interno di ~ "nulla" o ~ "nulla" viene utilizzata così come è senza modifiche tranne l'interpolazione.

http://lesscss.org

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}