No Login Data Private Local Save

CSS Media Query Range Tester – Online Width/Height Debug

22
0
0
0
Width
--
pixels
Height
--
pixels
Orientation
--
DPR
--
device pixel ratio
Viewport Width Range
Phone 0–480 Phablet 480–768 Tablet 768–1024 Desktop 1024–1440 Wide 1440+
Bootstrap 5 Breakpoints
Common Device Queries
Custom Media Query Tester

Enter a CSS media query condition to test against your current viewport. Examples: (min-width: 768px), (max-width: 480px), (orientation: landscape), (min-resolution: 2dppx)

@media
Viewport Height Range
0–600 600–800 800–1000 1000–1300 1300+
Common Device Reference
Device Width Height DPR Matches Now
Frequently Asked Questions

A CSS media query is a conditional rule that applies styles only when the browser viewport meets certain conditions — such as a minimum width, maximum height, orientation, or screen resolution. Media queries are the foundation of responsive web design, allowing layouts to adapt seamlessly across phones, tablets, laptops, and wide monitors.

Common breakpoints include: 320px (small phones), 375px (iPhone), 480px (large phones), 768px (tablets), 1024px (small laptops / landscape tablets), 1280px (standard laptops), 1440px (desktops), and 1920px+ (large monitors). Bootstrap 5 uses: X-Small (<576px), Small (≥576px), Medium (≥768px), Large (≥992px), X-Large (≥1200px), and XX-Large (≥1400px).

min-width applies styles when the viewport is at least the specified width (mobile-first approach). max-width applies styles when the viewport is at most the specified width (desktop-first approach). For example, (min-width: 768px) targets tablets and larger, while (max-width: 767px) targets phones and small tablets only.

window.matchMedia() is a JavaScript method that tests whether a given media query matches the current viewport. It returns a MediaQueryList object with a matches boolean property. You can also attach listeners to respond when the match status changes — useful for programmatic responsive behavior without CSS alone. This tool uses matchMedia to evaluate every query in real time.

DPR is the ratio between physical screen pixels and CSS pixels. A Retina MacBook has DPR 2, meaning 2 physical pixels per CSS pixel. Many smartphones have DPR 3. You can target high-DPR screens with (min-resolution: 2dppx) or (-webkit-min-device-pixel-ratio: 2) to serve sharper images and graphics. This tool shows your current DPR in real time.

The (orientation: portrait) query matches when the viewport height is greater than its width. (orientation: landscape) matches when width exceeds height. These are useful for adjusting layouts on tablets and phones when users rotate their devices. Note: on desktop, browsers are typically in landscape orientation unless the window is manually resized to be taller than wide.

Yes! Use and to require all conditions to match (e.g., (min-width: 768px) and (max-width: 1024px) targets tablets specifically). Use a comma , to create an "or" relationship (e.g., (max-width: 480px), (min-width: 1600px) matches either very small or very large screens). You can also mix conditions like (min-width: 1024px) and (orientation: landscape).

While browser DevTools offers responsive design mode with device presets, this tool provides a live, at-a-glance dashboard of all your media query breakpoints simultaneously. You can instantly see which Bootstrap breakpoints match, test custom queries, and visualize where your current viewport falls on the width/height spectrum — all without opening DevTools or toggling device mode. It's especially handy during development for quick sanity checks.
🔧 Related Tools