Responsive Design Helper
Generate CSS media queries and detailed responsive breakpoints. Supports Mobile-First/Desktop-First and Tailwind configurations.
Breakpoint Visualizer
scale: 0 - 2000px
Viewport Width
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px
0px 500px 1000px 1500px 2000px
Configuration
Breakpoints (px)
Output
/* SM */
@media (min-width: 640px) {
/* styles */
}
/* MD */
@media (min-width: 768px) {
/* styles */
}
/* LG */
@media (min-width: 1024px) {
/* styles */
}
/* XL */
@media (min-width: 1280px) {
/* styles */
}
/* 2XL */
@media (min-width: 1536px) {
/* styles */
}Features
- Generate standard media query breakpoints
- Mobile-first vs Desktop-first toggles
- Common device width reference
- Container query snippets
- Visual range preview
- Copy CSS @media blocks
Common Use Cases
- Set up breakpoints for a new project
- Target specific devices (Tablets, Large Desktops)
- Implement dark mode support
- Create responsive typography
- Debug layout issues on specific sizes
Responsive Design
Responsive Web Design makes web pages render well on a variety of devices and window or screen sizes. The core technique is the CSS Media Query.
Mobile-First (Min-Width):
Start with styles for mobile, then add overrides for larger screens. This is the industry standard.
/* Mobile styles here */
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }Container Queries:
A modern evolution allowing components to adapt based on their container's width, not the viewport.
Examples
Valid - Mobile First
@media (min-width: 640px) { ... } Valid - Dark Mode
@media (prefers-color-scheme: dark) { ... } Valid - Container Query
@container (min-width: 400px) { ... }Frequently Asked Questions
Min-width vs Max-width?
Use `min-width` for mobile-first workflows (recommended). Use `max-width` for "desktop-first" workflows where you start with desktop styles and shrink them down. Avoid mixing them to prevent complexity.
What are the standard breakpoints?
Common standards (like Tailwind CSS): 640px (sm), 768px (md), 1024px (lg), 1280px (xl), 1536px (2xl).
What meta tag do I need?
Always include `` in your HTML head, or responsive CSS won't work on mobile devices.
💡 Tips
- Use <code>em</code> or <code>rem</code> for media queries to respect user zoom settings.
- Don't target specific devices (like "iPhone 12"). Target content breakpoints where your layout breaks.
- Start with the base mobile view and scale up.