No Login Data Private Local Save

CSS Media Query Tester - Online Verify Breakpoint Conditions

32
0
0
0

CSS Media Query Tester

Online Verify Breakpoint Conditions – Test your responsive design rules directly in the browser

Media Query Input
Invalid media query syntax. Please check your input.

Quick Presets:

xs sm md lg xl xxl
Result
MATCHED
NOT MATCHED

Enter a media query and press Test

Current Viewport Info
Width
-
Height
-
Device Pixel Ratio
-
Orientation
-
Touch Device -
Color Scheme (prefers) -
Reduced Motion -

Resize your browser window to see updates

Frequently Asked Questions

A CSS media query is a conditional rule that applies styles only when certain conditions are true, such as viewport width, device orientation, or resolution. It’s the foundation of responsive web design.

Simply type (or paste) any valid media query expression into the input field and click Test Media Query. The tool instantly tells you whether the current browser matches that condition. You can also pick a preset breakpoint to quickly test common responsive ranges.

  • xs: <576px
  • sm: ≄576px
  • md: ≄768px
  • lg: ≄992px
  • xl: ≄1200px
  • xxl: ≄1400px

Yes! You can type print, screen, or any combination. The browser’s matchMedia() API will evaluate the whole media query string exactly as you wrote it, including media types.

Common pitfalls include missing parentheses, incorrect logical operators (use and instead of ,), or forgetting that media queries are case‑sensitive for feature names. Always validate with this tool and check your CSS syntax.
🔧 Related Tools