Bootstrap Breakpoints and Media Queries

Bootstrap Breakpoints and Media Queries

Ya que Bootstrap se desarrolló para ser móvil primero, usamos un puñado de consultas de medios para crear puntos de interrupción sensibles para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en los anchos mínimos de las vistas y nos permiten ampliar los elementos a medida que cambian las vistas.

Bootstrap utiliza principalmente los siguientes rangos de consulta de medios, o puntos de interrupción, en nuestros archivos Sass de origen para nuestro diseño, sistema de cuadrícula y componentes.

// 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) { … }
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
Copy
// No media query necessary for xs breakpoint as it’s effectively @media (min-width: 0) { ... }
@include media-breakpoint-up(sm) { … }
@include media-breakpoint-up(md) { … }
@include media-breakpoint-up(lg) { … }
@include media-breakpoint-up(xl) { … }

// Example: Hide starting at min-width: 0, and then show at the sm breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}

Deja un comentario