Master Responsive Design: How to Set Breakpoints for Every Device

First, this article is a basic introduction focusing on setting breakpoints.

Many beginners have questions about responsive design: why do it, how to start, and how to set breakpoints given many resolutions.

Why Learn Responsive Design

Responsive design is like dressing for different occasions: at home you wear pajamas, at work a suit, and at a team‑building event casual sportswear. Similarly, a webpage needs different layouts for PC, tablet, and mobile to attract users and improve experience.

Without proper responsive handling, a site like China Mobile’s mobile page is simply scaled to fit the device width, resulting in a poor user experience.

Another practical reason is to serve users on all platforms smoothly, which ultimately drives revenue.

What Is Responsive Design

Responsive design ensures content is presented in the best possible way across different resolutions, enhancing user experience.

See media queries for concrete examples.

How to Start Responsive Design

Step 1: Set viewport

<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>

For the rationale, refer to a deeper discussion on the viewport meta tag.

Step 2: Set breakpoints

Breakpoints are implemented via media queries.

Before discussing breakpoints, consider the analogy of a phone service menu (1 for billing, 2 for data, 3 for business, 0 for human assistance). This leads to two principles for setting responsive breakpoints:

Plan several key breakpoints such as PC, tablet, and phone (like the numbered options).

Add specific breakpoints for special cases (like the 0‑key human service).

Bootstrap 4 breakpoint defaults are:

<code>// Default mobile styles
// >= 34em (544px) – phone landscape
@media (min-width: 34em) { ... }

// >= 48em (768px) – tablet portrait
@media (min-width: 48em) { ... }

// >= 62em (992px) – narrow PC
@media (min-width: 62em) { ... }

// >= 75em (1200px) – wide PC
@media (min-width: 75em) { ... }</code>

An additional ultra‑wide breakpoint for image‑heavy sites:

<code>// PC ultra‑wide 1380px
@media (min-width: 1380px) { ... }</code>

A simple demo can illustrate these breakpoints in action.

Key breakpoints to consider are: phone landscape, tablet portrait, narrow PC, wide PC, ultra‑wide PC (useful for e‑commerce or video sites), plus the default mobile style, providing full coverage across devices.

Why Use min‑width?

min‑width applies styles when the screen width is equal to or greater than the specified value, whereas max‑width applies when the width is less than or equal to the value. Most frameworks, including Bootstrap, adopt a mobile‑first approach, building from simple mobile styles upward using min‑width. If a project is PC‑first, max‑width would be used instead.

Why These Specific Numbers?

The numbers stem from three sources: range representations (e.g., 544px), typical device resolutions (e.g., 768px), and the actual content width on larger screens (e.g., 992px and 1200px). They reflect how content behaves on each platform.

How to Apply These Breakpoints?

Simply copying them is insufficient; you must consider the platforms your site targets and the distribution of user screen resolutions.

Which platforms must be supported?

How are users' browser resolutions distributed?

Five common compatibility scenarios exist:

1) PC only 2) PC + tablet 3) Tablet + phone 4) Phone only 5) Full compatibility (e.g., personal blogs).

Small sites or blogs often use full compatibility with fluid layouts, while complex sites may separate content for PC + tablet and a distinct mobile version.

Full‑compatible sites can rely on the core Bootstrap breakpoints and add local breakpoints for fine‑tuning. PC + tablet sites need only narrow, wide, and ultra‑wide breakpoints. Phone‑only sites may omit breakpoints altogether but must ensure layouts work at 320 px, 360 px, and 375 px widths.

Understanding user resolution distribution is crucial. For example, a site’s PC resolution stats might show 7% at 1024 px, 84% above 1200 px, and 46% above 1380 px. If the site is an e‑commerce platform, focusing on 1200 px and 1380 px breakpoints is more valuable than 1024 px.

In summary, breakpoint decisions should reflect site content, user devices, audience scale, and cost considerations rather than blindly copying defaults.

Layout and Display…

The most challenging part involves handling images, tables, navigation, and other elements; a single article cannot cover everything. Recommended resources include:

RESPONSIVE IMAGES 101

The book “Responsive Web Design”.