Best Practice, Surgery level responsive design breakpoints system both width and height media queries
layout: docs title: Breakpoints description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes group: layout toc: true
-
Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.
-
Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use
min-width
in our media queries. -
Mobile first, responsive design is the goal. Bootstrap's CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
includes five default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized.
Breakpoint | Dimension - Width | Dimension - Height |
---|---|---|
Small | <(0em, 40em); /* 0, 640px */ | <(0em, 22.5em); /* 0, 360px */ |
Medium | ≥(40.063em, 64em); /* 641px, 1024px */ | ≥(22.5625em, 36em); /* 361px, 576px */ |
Large | ≥(64.063em, 90em); /* 1025px, 1440px */ | ≥(36.0625em, 50.625em); /* 577px, 810px */ |
Extra Large | ≥(90.063em, 120em); /* 1441px, 1920px */ | ≥(50.6875em, 67.5em); /* 811px, 1080px */ |
Extra Extra large | ≥(120.063em); /* 1921px */ | ≥(67.5625em); /* 1081px */ |
@import 'src/assets/breakpoints.scss';
//by width
@media #{$xlarge-height} {
display: block;
}
}
//by height
@media #{$xlarge-height-up} {
display: block;
}
}