twitter-bootstrap - alertas - bootstrap container

Bootstrap 3 puntos de interrupción y consultas de medios

Question

En http://getbootstrap.com/css/ dice:

Utilizamos las siguientes consultas de medios para crear los puntos de corte clave en nuestro sistema de grillas.

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

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

Dispositivos medianos (escritorios, 992px y superiores): @media (min-width: @ screen-md) {...}

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

¿Se supone que podemos usar los nombres @ screen-sm, @ screen-md y @ screen-lg en nuestras consultas de medios también? Porque no funciona para mí. Tengo que usar medidas de píxeles como @media (min-width: 768px) {...} antes de que funcione. ¿Estoy haciendo algo mal?

Además, ¿es un error la referencia a 480px para dispositivos extra pequeños? ¿No debería decir eso hasta 767px?

Answer 1

Bootstrap 3 Media Queries

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

Answer 2

Aquí están los selectores utilizados en Bootstrap 4. No hay una configuración "mínima" en BS4 porque "extra pequeño" es el valor predeterminado. Es decir, primero codificará el tamaño de XS y luego tendrá estos sobrescrituras de medios después.

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

Answer 3

Bootstrap no documenta las consultas de medios muy bien. Esas variables de @screen-sm , @screen-md , @screen-lg realidad se refieren a variables LESS y no a CSS simples.

Cuando personaliza Bootstrap, puede cambiar los puntos de interrupción de la consulta de medios y cuando se 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 ser codificado una vez y luego personalizado por el usuario final para satisfacer sus necesidades.

Una pregunta similar aquí que podría proporcionar más claridad: Bootstrap 3.0 Media consulta

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

Con respecto a su segunda pregunta, eso no es un error tipográfico. Una vez que la pantalla está por debajo de 768px el marco se torna completamente fluido y cambia de tamaño en cualquier ancho de dispositivo, eliminando la necesidad de puntos de corte. El punto de interrupción en 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.

Answer 4

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

Desde http://getbootstrap.com/css/#grid-media-queries

De hecho, @ screen-sm-min es una variable que se reemplaza por el valor especificado en _variable cuando se compila con menos. Si no usa menos, 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 es oficialmente compatible con sass https://github.com/twbs/bootstrap-sass . Si está utilizando sass (y debería), 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) { }

Answer 5

Este problema se debatió en https://github.com/twbs/bootstrap/issues/10203 Por ahora, no existe un plan para cambiar Grid debido a razones de compatibilidad.

Puede obtener Bootstrap de este tenedor, sucursal hs: https://github.com/Teachnova/bootstrap/tree/hs

Esta rama te da un punto de interrupción extra a 480px, así que tienes que:

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ño para dispositivos móviles horizontales (HS, menos de 768px)
3. Diseño para tabletas (SM, menos de 992px)
4. Diseño para dispositivos de escritorio (MD, menos de 1200 px)
5. Diseño para dispositivos grandes (LG, más de 1200 px)

El diseño móvil 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) */
}
}

Answer 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 768px en Bootstrap 3.

Si quiere usar @screen-sm-min y otras mezclas, entonces necesita compilar con LESS, vea http://getbootstrap.com/css/#grid-less

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

Answer 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 corte .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) {
}

Answer 8

Si está utilizando MENOS, podría usar estos dos puntos de interrupción adicionales que funcionan (¡probados!): https://github.com/brgrz/bootstrap-breakpoints

HTH

Answer 9

cuando uso @media (max-width: 768px) mi diseño se rompe en 768px. 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.

Answer 10

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