Image ©2025 ux-qa.com

Media Queries

Media queries are the technical backbone that makes breakpoints work in code. While breakpoints define when the layout should adapt, media queries tell the browser how to adapt it.

Think of breakpoints as boundaries in your design, and media queries as the instructions that kick in when you cross each one.

What Are Media Queries?

Media queries are a CSS feature that allows content to adapt to different screen sizes, orientations, resolutions, and even device features.

They look like little conditionals that say:

“If the screen is this size or bigger/smaller, then apply these styles.”

You can also use min-width, orientation, aspect-ratio, and even prefers-color-scheme for dark mode.

Common Media Query Use Cases

Change layout direction
Switch from row to column on small screens


Resize fonts/images

Scale up/down for readability


Show/hide elements

Hide sidebar on phones


Adjust spacing/margins

Tighten padding on small devices


Switch nav patterns

Toggle hamburger menu

Media Queries + Breakpoints

Defines breakpoints

768px = switch to mobile layout

1024px = show two columns

1280px = enable sticky sidebar

Additional Uses:

• Dark Mode
• Orientation
• Hover Capability

Why UI Designers Should Know Media Queries

Even if you don’t code, knowing what media queries can do helps you:

• Design for layout behaviors at different sizes
• Communicate with devs about responsiveness
• Use design tools more effectively
• Address responsive issues early in the design phase