Media Queries CSS for Mobile: A Practical Guide

Using Media Queries CSS for Mobile Responsiveness

Media queries let you apply CSS rules only when certain conditions are true, such as screen width, orientation, or resolution. For mobile design, they are the primary way to shift layouts, resize text, and hide or show elements based on the device in use. Writing effective media queries means choosing breakpoints that reflect real content needs rather than targeting specific phone models.

How Media Queries Work

A media query consists of a media type and optional expressions that check for features. The most common pattern uses min-width to apply styles as the viewport grows, and max-width to target smaller screens. For mobile-first development, you start with base styles for narrow viewports and use min-width queries to layer on complexity for larger devices.

Common Breakpoints for Mobile

While there is no official set of breakpoints, common ranges help organize layouts:

• Small mobile: up to 480px
• Large mobile and small tablets: 481px to 768px
• Tablet and small desktop: 769px to 1024px
• Desktop: 1025px and above

These ranges work well as starting points, but the right breakpoint depends on where your content naturally breaks. Inspect your design at different widths and adjust accordingly.

Mobile-First CSS Example

With a mobile-first approach, your default styles target narrow screens. You then use min-width queries to refine the layout for larger viewports. This reduces the amount of CSS the browser has to override on small devices and can improve performance on mobile networks.

/ Base styles for mobile / .container { padding: 1rem; }

/ Adjust for tablets and up / @media (min-width: 768px) { .container { max-width: 720px; margin: 0 auto; } }

Targeting Specific Mobile Features

Beyond width, media queries can check for hover capability, pointer type, and screen resolution. For example, pointer: coarse often matches touch devices, while hover: hover indicates a mouse is available. These features help you build interfaces that feel right on mobile without relying on user-agent detection.

Testing and Validation

Use browser dev tools to simulate different screen sizes and pixel densities. Test on real devices when possible, because emulators do not always reflect touch behavior, network conditions, or browser rendering quirks. Check that tap targets are large enough and that text remains readable without horizontal scrolling.