Pick the conditions you need and get a clean @media rule, with a live check that shows whether it matches your current screen. Or choose a framework to get a complete mobile-first or desktop-first breakpoint skeleton.
Last updated:
Quick start:
Conditions (all must match)
Breakpoints (editable, in px)
Syntax
Unit
Checking…
Generated CSS
Advertisement
Advertisement
How to use the CSS Media Query Generator
Choose a mode: Custom query to build one rule, or Framework breakpoints for a full set.
Add conditions such as min-width 768px, orientation landscape or prefers-color-scheme dark; they are joined with and.
Pick the syntax and unit: classic min/max or range syntax, in px, em or rem.
Type a selector and declarations to wrap them in the rule, and watch the match indicator while you resize the window.
Copy the CSS or download it as a .css file.
Popular framework breakpoints
All values are minimum widths in CSS pixels. The first range of each framework starts at 0.
Framework
Breakpoints (min-width)
Default approach
Bootstrap 5
sm 576, md 768, lg 992, xl 1200, xxl 1400
Mobile first; max-width uses .98 (767.98px)
Tailwind CSS
sm 640, md 768, lg 1024, xl 1280, 2xl 1536
Mobile first (v4 writes them as 40rem, 48rem, 64rem, 80rem, 96rem)
medium 600, expanded 840, large 1200, extra-large 1600
Window size classes
Media features cheat sheet
Feature
Values
Typical use
min-width / max-width
length
Responsive layouts based on viewport width
orientation
portrait, landscape
Short landscape phones, kiosk screens
min-resolution
2dppx (= 192dpi)
Serving sharper images to high-density screens
hover / pointer
hover, none / fine, coarse, none
Hover effects only for mouse users; larger tap targets for touch
prefers-color-scheme
light, dark
Dark theme that follows the system setting
prefers-reduced-motion
reduce, no-preference
Turning off animations for people who asked for less motion
prefers-contrast / forced-colors
more, less / active
High contrast and Windows contrast themes
display-mode
standalone, fullscreen, minimal-ui, browser
Styles for an installed web app (PWA)
Classic vs range syntax
@media (min-width: 768px) and (max-width: 1023.98px) and @media (768px <= width < 1024px) select the same screens. The range form is shorter, supports strict < so you no longer need the .98 trick, and works in Chrome and Edge 104+, Firefox 63+ and Safari 16.4+. In em units, the generator divides pixel values by 16, the default browser font size used for media queries.
Frequently asked questions
What is a CSS media query?
A media query applies a block of CSS only when the device or browser matches certain conditions, such as a minimum viewport width, a landscape orientation or a dark color scheme preference. It is written as @media followed by the conditions and a block of rules.
Should I use min-width or max-width?
With a mobile-first approach you write base styles for small screens and add min-width queries for larger ones; this is what Bootstrap and Tailwind do. Desktop-first uses max-width queries to override desktop styles on smaller screens. Both work; mobile-first usually produces less CSS overriding.
Why does Bootstrap use 767.98px instead of 767px?
Browsers can report fractional widths on high-density screens and when zoomed. A max-width of 767px would leave a gap between 767 and 768px where neither query matches; 767.98px closes that gap while still not overlapping min-width: 768px.
What is the media query range syntax?
Media Queries Level 4 allows comparisons like (width >= 768px) or (400px <= width <= 700px) instead of min-width and max-width. It is supported in all current major browsers since 2023; use the classic syntax if you still need to support older browsers.
Should breakpoints be in px or em?
Both work in modern browsers. em-based media queries are relative to the browser's default font size (usually 16px), so they scale if a user raises their default text size. rem behaves the same as em inside media queries.
How do I detect dark mode with CSS?
Use @media (prefers-color-scheme: dark) { … }. It matches when the operating system or browser is set to a dark theme. Also add the color-scheme property or meta tag so built-in controls and scrollbars match.
What does @media (hover: hover) do?
It matches devices whose primary input can hover, such as a mouse or trackpad. Wrapping hover effects in it avoids sticky hover states on touch screens. Use (any-hover: hover) to check any connected input instead of the primary one.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.