CSS Responsive Design

Breakpoints

What exactly is a small device? How large is a large device? These questions do not have final answers, but most developers and user interface frameworks have agreed on a couple of screen width breakpoints that differentiate small devices from medium and large devices.

Breakpoints (screen width):

• Very small (less than 640px): Most mobile phones trick their web browsers into thinking their screen width is about 360px wide. This width is usually the minimum width we ever have to consider when designing web sites. Developers tend to start with this width when designing with a mobile first mind-set.
• Small (640px): Portrait mode mobile phones.
• Medium (768px): Old laptops and tablets.
• Large (1024px): Laptops and tablets in landscape mode.
• Extra Large (1280px): Laptops and desktops.

It obviously requires some effort fine-tuning our styling for each of these breakpoints, but not as much as one would think. Grid and flexbox makes our jobs a lot easier. All we often need to do is use media queries to modify a grid's row and column templates or a flex item's basis length.