Media Query Basics: How to Write @media, Breakpoints, and Mobile-First

The same web page shows a single column on a smartphone, yet neatly rearranges into two or three columns on a desktop. What supports this "looks change to fit the screen" responsive design is the media query. It may look difficult at first, but the mechanism is simply a rule that says "use this CSS only under a certain condition." This article explains, step by step, what a media query is, how to write one, and practical ideas such as breakpoints and mobile-first.

Media Queries and the Basics of Responsive Design

A media query is a mechanism in CSS that tests conditions such as the screen width, orientation, and resolution, and applies certain styles only when those conditions are met. With it, a single HTML and CSS can support a wide range of screen sizes such as smartphones, tablets, and desktops. This is the central technique of responsive design.

In the past, people sometimes built a separate "PC site" and "smartphone site," but because of maintenance overhead and SEO concerns, the mainstream approach today is to make one page change according to the screen width. Think of a media query as the language for declaring, in CSS, the "boundaries of that change."

In responsive work, you often deal with values relative to the screen rather than fixed pixel widths. When you want to replace px with vw (a percentage of the viewport width), the px to vw Converter lets you check a rough number right away.

How to Write @media and Its Basic Syntax

A media query is written with the @media rule. The most basic form is as follows.

@media (max-width: 768px) { /* CSS used when the condition is met */ }

This example means "when the screen width is 768px or less," and the styles inside the braces apply only when that condition holds. The condition part is wrapped in parentheses, and you can combine several elements.

• Media type: screen, print, and so on. If omitted, it is treated as all.
• Media features: conditions such as min-width, max-width, and orientation (portrait or landscape).
• Logical operators: and stacks conditions, while a comma means "any of them."

For example, to specify a range like "on screen and between 600px and 1024px wide," you write @media screen and (min-width: 600px) and (max-width: 1024px). When the condition is not met, the styles inside that @media are simply ignored and the normal CSS is used.

The Difference Between min-width and max-width

The most commonly used media features are min-width and max-width. The names are similar but the directions are opposite, so let us sort them out to avoid confusion.

min-width triggers at "the specified width or wider." For example, min-width: 768px takes effect at 768px and above. It pairs well with a style where you start from a small screen and add decoration as the screen grows, which is the basis of the mobile-first approach described below.

max-width conversely triggers at "the specified width or narrower." max-width: 768px takes effect at 768px and below. It is often used in the desktop-first style, where you design for PC first and then adjust so the layout does not break as the screen narrows. Neither is the single correct answer; what matters is choosing one consistently to match your design policy.

How to Think About Breakpoints

The screen width at which the layout switches is called a breakpoint. For example, if you "change the menu from horizontal to vertical at 600px," that 600px is the breakpoint.

When deciding breakpoints, beginners often slice them finely to match specific devices: "iPhone is 375px, iPad is 768px, and so on." But new devices keep appearing, so chasing each model is not realistic. What matters is dividing by "the width at which content becomes hard to read," not by device name.

• If a line of text gets too long to read comfortably, set a maximum width.
• If horizontally arranged cards get cramped, place a breakpoint that reduces the number of columns.
• Do not increase the count needlessly; starting with about two or three is easier to manage.

Common rough guides include around the phone-to-tablet boundary (about 600 to 768px) and the tablet-to-PC boundary (about 1024px), but these are only starting points. In practice, the proven approach is to check your own design while gradually changing the browser width and place breakpoints just before things break.

Mobile-First and the Viewport

Mobile-first is a design approach where you first build the layout for the narrow smartphone screen as the base, then use min-width media queries to add "decoration for wider screens." With smartphone users in the majority today, it is one of the most recommended ways to proceed.

/* Base: for phones. Display in a single column */ .cards { display: block; } /* When the screen is wide: arrange horizontally */ @media (min-width: 768px) { .cards { display: flex; } }

Written this way, the base CSS applies to all screens in common, and the extra styles are overridden only on wide screens. Unneeded decoration is less likely to load on narrow screens, and the code stays simpler.

And the one thing you must never forget for responsive design is the viewport meta tag. Put the following single line inside the <head> of your HTML.

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this, a smartphone tries to shrink a PC-sized wide screen, making text extremely small or preventing media queries from working as intended. width=device-width means "match the actual screen width," and initial-scale=1 means "set the initial zoom to 1:1." These are the basic premise of responsive design.

Combining With Relative Units and clamp

Media queries switch layouts in "steps," but if you specify font sizes and spacing finely at every breakpoint, the code tends to bloat. So in recent years, an approach that combines relative units and the clamp() function to reduce the number of breakpoints has spread.

Relative units are units based on the parent element or screen size rather than fixed px. Representative ones include rem, based on the root element's font size, and vw, based on the screen width (1% of the viewport width). When you want to quickly check the relationship between px and vw, the px to vw Converter saves you the conversion effort.

Even more powerful is clamp(). By writing clamp(minimum, preferred, maximum), you can achieve in one line a behavior that "changes smoothly with the screen width while never getting too small or too large." For example, setting a heading to font-size: clamp(1.5rem, 4vw, 3rem) keeps it at an appropriate size automatically on both narrow and wide screens, removing the need to switch sizes across many media-query steps. You can build such clamp values quickly with the CSS clamp Generator by entering the minimum and maximum sizes and the target screen widths.

In short, the modern basis of responsive design is a division of roles: media queries handle "major layout switches," while clamp and relative units handle "smooth size adjustments." Start by playing with concrete numbers in the CSS clamp Generator and the px to vw Converter, and confirm the behavior in combination with your @media conditions. Working hands-on is the shortcut to understanding.

Please note that this article is intended to provide general information. Because CSS specifications and browser support change, make your decision after checking the latest official information when implementing.