En la documentación de consultas de medios de Bootstrap 3 dice:

Utilizamos las siguientes consultas de medios en nuestros archivos Less para crear los puntos de interrupción clave en nuestro sistema de cuadrícula.

Dispositivos extra pequeños (teléfonos, menos de 768 px): no hay consulta de medios ya que este es el valor predeterminado en Bootstrap

Pequeños dispositivos (tabletas, 768 px y más): @media (min-width: @screen-sm-min) { ... }

Dispositivos medianos (computadoras de escritorio, 992 px y más): @media (min-width: @screen-md-min) { ... }

Dispositivos grandes (escritorios grandes, 1200 px y más): @media (min-width: @screen-lg-min) { ... }

Se supone que debemos ser capaces de utilizar los @screen-sm, @screen-mdy @screen-lgnombres en nuestras preguntas de los medios, así? Porque no me funciona. Tengo que usar medidas de píxeles como @media (min-width: 768px) {...}antes de que funcione. ¿Estoy haciendo algo mal?

Además, ¿la referencia a 480px para dispositivos extra pequeños es un error tipográfico? ¿No debería eso decir hasta 767px? ( desde que se eliminó de la documentación )

Bootstrap 4 Consultas de medios

// 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 proporciona CSS de origen en Sass que puede incluir a través de 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 Consultas de medios

/*==========  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 Consultas de medios

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

}

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

Bootstrap no documenta muy bien las consultas de medios. Esas variables de @screen-sm, @screen-md,@screen-lg se hace referencia en realidad a las variables menos y CSS no es simple.

Cuando personaliza Bootstrap, puede cambiar los puntos de interrupción de la consulta de medios y cuando compila las variables @ screen-xx se cambian a cualquier ancho de píxel que haya definido como screen-xx. Así es como un marco como este puede codificarse una vez y luego ser personalizado por el usuario final para satisfacer sus necesidades.

Una pregunta similar aquí que podría proporcionar más claridad: consultas de medios de Bootstrap 3.0

En su CSS, aún tendrá que usar consultas de medios tradicionales para anular o agregar a lo que está haciendo Bootstrap.

En lo que respecta a su segunda pregunta, eso no es un error tipográfico. Una vez que la pantalla cae por debajo de 768px, el marco se vuelve completamente fluido y cambia de tamaño a cualquier ancho de dispositivo, eliminando la necesidad de puntos de interrupción. El punto de interrupción a 480px existe porque hay cambios específicos que ocurren en el diseño para la optimización móvil.

Para ver esto en acción, vaya a este ejemplo en su sitio ( http://getbootstrap.com/examples/navbar-fixed-top/ ), y cambie el tamaño de su ventana para ver cómo trata el diseño después de 768px.

Este problema se ha discutido en https://github.com/twbs/bootstrap/issues/10203 Por ahora, no hay ningún plan para cambiar Grid por razones de compatibilidad.

Puede obtener Bootstrap de esta bifurcación, rama hs: https://github.com/antespi/bootstrap/tree/hs

Esta rama le proporciona un punto de interrupción adicional a 480 px, por lo que debe:

1. Diseño para dispositivos móviles primero (XS, menos de 480 px)
2. Agregue clases HS (dispositivos pequeños horizontales) en su HTML: col-hs- *, visible-hs, ... y diseñe para dispositivos móviles horizontales (HS, menos de 768px)
3. Diseño para tabletas (SM, menos de 992 px)
4. Diseño para dispositivos de escritorio (MD, menos de 1200px)
5. Diseño para dispositivos grandes (LG, más de 1200px)

Diseñar dispositivos móviles primero es la clave para entender Bootstrap 3. Este es el cambio principal de BootStrap 2.x. Como plantilla de regla, puede seguir esto (en MENOS):

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

Sé que esto es un poco viejo, pero pensé que contribuiría. Basándome en la respuesta de @Sophy, esto es lo que hice para agregar un punto de interrupción .xxs. No me he ocupado de las clases visible-inline, table.visible, etc.

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

}

La referencia a 480px ha sido eliminada. En cambio dice:

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

No hay un punto de interrupción por debajo de 768 px en Bootstrap 3.

Si desea usar el @screen-sm-miny otros mixins, entonces necesita compilar con MENOS, consulte http://getbootstrap.com/css/#grid-less

Aquí hay un tutorial sobre cómo usar Bootstrap 3 y MENOS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Debería poder usar esos puntos de interrupción si usa http://lesscss.org/ para construir su 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) {  }

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

De hecho, @screen-sm-mines una variable que se reemplaza por el valor especificado en _variablecuando se construye con Less. Si no usa Less, puede reemplazar esta variable por el valor:

/* 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 oficialmente admite Sass: https://github.com/twbs/bootstrap-sass . Si está utilizando Sass (y debería hacerlo), la sintaxis es un poco diferente.

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

Estos son los selectores utilizados en Bootstrap 4. No hay una configuración "más baja" en BS4 porque "extra pequeño" es el valor predeterminado. Es decir, primero codificaría el tamaño XS y luego tendría que anular estos medios.

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

cuando uso @media (ancho máximo: 768 px) mi diseño se rompe en 768 px. Pero está bien en 767px y también en 769px. Por lo tanto, creo que será 767px como ancho máximo para apuntar a dispositivos pequeños.

para bootstrap 3 tengo el siguiente código en mi componente de barra de navegación

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

entonces puedes usar algo como

@media wide { selector: style }

Esto utiliza cualquier valor al que tenga configuradas las variables.

Escapar le permite usar cualquier cadena arbitraria como propiedad o valor variable. Cualquier cosa dentro de ~ "cualquier cosa" o ~ 'cualquier cosa' se usa tal cual sin cambios, excepto la interpolación.

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



}