¿Cómo utilizar Bootstrap Media Query Breakpoints?

Publicado por David Paredes el 30 de Agosto de 2016

Los Beakpoint se utilizan para separar la altura o anchura de las ventanas gráficas en pasos-secuenciales y proporcionar para el caso en el que se necesita un nuevo diseño visual para mostrar los cambios de una manera atractiva. Los Breakpoints  trabajan con la anchura-mínima y anchura-máxima de la pantalla , que permiten a nuestra página web funcionar de manera diferente en diferentes tamaños.La anchura-mínima: Se refiere a todo lo superior o igual al tamaño de pantalla concreto. La anchura-máxima: Se refiere a todo igual o menor que el tamaño de la pantalla determinada. Las mediciones que establece Bootstrap Media Query Breakpoints son:

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

@media (max-width: @screen-xs-max) {  }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {  }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {  }
@media (min-width: @screen-lg-min) {  }
Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap

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

 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) { ... }
@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 of use:
@include media-breakpoint-up(sm) {
  .some-class {    display: block;  }
}

 

¿Está buscando construir o personalizar un sitio de Drupal? Escríbanos sobre su proyecto y nos pondremos en contacto con usted dentro de 48 horas.

Si desea obtener más información sobre por qué Drupal es el sistema de gestión de contenido de código abierto más utilizado en el mundo, visite drupal.org/about.