Breakpoints
Overview
Breakpoints are the building blocks of responsive design. Mobile first, responsive design is the goal. This methodology allows us to apply the bare minimum of styles to make a layout work at the smallest breakpoint.
Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
Based on our current mix of top devices and browsers we have recommended that we update our breakpoints to the following:
default- mobile portraitmin-width: 480pxmobile landscapemin-width: 768pxtablet portraitmin-width 992pxtablet landscapemin-width: 1280pxlarge 1min-width: 1440pxlarge 2min-width: 1920pxlarge 3