Media Query Generator

Generate correct CSS @media queries for any breakpoint. Supports mobile-first and desktop-first approaches.

320px — Mobile S
480px — Mobile L
640px — sm
768px — md
1024px — lg
1280px — xl
1536px — 2xl
1920px — Full HD

      
Copied!

Mobile-first means you write base styles for small screens, then use min-width queries to add styles for larger screens. It results in leaner CSS and better performance on mobile devices.