Bootstrap 3 puntos de interrupción y consultas de medios


170

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 )



Aquí están los selectores utilizados en BS4. 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 después. @media (min-width: 576px) {} @media (min-width: 768px) {} @media (min-width: 992px) {} @media (min-width: 1200px) {}
Babbandeep Singh

Respuestas:


206

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


8
@ CyrilDuchon-Doris, la pregunta era sobre Bootstrap 3 ... así que no lo creo.
Bagata

12
La respuesta recibió 30 puntos y menciona Bootstrap 2. Muchas personas lo verán incluso si no usan Bootstrap 3. Siempre estoy muy agradecido con las personas que editan su propia respuesta con información actualizada, aunque sea un poco fuera de lugar. del alcance inicial.
Cyril Duchon-Doris

Entonces, ¿hay algo más pequeño por debajo de 479?
SuperUberDuper el

2
Bootstrap v4 ni siquiera es estable todavía. ¿Eres consciente de ello? Es posible que la respuesta deba actualizarse muchas veces antes de alcanzar una versión estable.
Gherman

Creo que aquí está el error de un píxel, que en realidad puede tener efecto. Para pantallas de 1200 px y 320 px, tendrán efecto tanto la consulta de medios máximos como la consulta de medios mínimos. Todas las consultas de medios máximos deben ser menos 1px (1199px por ejemplo). Las consultas de medios mínimas y máximas de 320 píxeles realmente no tienen sentido para mí, ya que las pantallas AFAIK prácticamente comienzan a 320 píxeles.
Ben Carp

39

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.


66
Para ver esto en acción, vaya a este ejemplo en su sitio y cambie el tamaño de su ventana para ver cómo trata el diseño después de 768px. // ¿Qué tiene que ver eso con 480px? No veo que ocurra nada diferente a 480 píxeles en comparación con, digamos, 500 px.
Kris Hunt

En cuanto a la expansión natural en el sistema variable de Bootstrap 3, esta debería ser la respuesta aceptada, ya que es un enfoque muy eficiente.
klewis

28

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

1
Lo siento, no entiendo el valor agregado de este tenedor. Según tengo entendido, lo haces @screen-hs-min:@screen-xs;. ¿Por qué no usar @screen-xsdirectamente aquí?
Bass Jobsen

Solo para una mejor comprensión. Esta variable le da una consistencia visual a la plantilla. Bootstrap 3 es móvil primero, por lo que todas las reglas fuera de la consulta de medios son para el tamaño móvil. Luego, si necesita una regla adicional para HS, anotará min-width: @screen-hs-min, si necesita una regla estra para SM, anotará min-width: @screen-sm-min, y así sucesivamente. Esta bifurcación se usa para agregar un nuevo punto de interrupción a 480px. Luego, el tamaño móvil es inferior a 480 px y aparece un nuevo tamaño (HS) entre 480 px y 768 px
Antonio Espinosa

Tenga en cuenta que la plantilla tiene un pequeño error tipográfico. screen-hs-min debería ser screen-xs-min
eflat

@eflat esto no es un error tipográfico, screen-hs-mines una nueva regla entre screen-xs-minyscreen-sm-min
Antonio Espinosa

7

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

}

1
Exactamente lo que necesitaba gracias! Así que no necesito hacerlo de nuevo :)
antoni

¡Además, no olvide las clases .visible-xs-inline, .visible-xs-inline-blockcada vez que anule .visible-xs!
antoni

6

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


2

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

1

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

0

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.


0

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


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



}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.