Micro Tools
Advertisement

Breakpoint Planner

Plan responsive breakpoints with a device reference and generate mobile-first media queries. Free CSS output.

Plan your breakpoints

Tick presets or type custom widths, then generate.

Media queries

Reference: phones 360-430, tablets 768-834, laptops 1280-1440, desktops 1536+.

Advertisement

How the planner works

Tick the preset breakpoints you want, add any custom widths, and choose mobile-first (min-width) or desktop-first (max-width). The tool sorts your breakpoints numerically and emits a clean media-query skeleton with comment placeholders, ready to paste into a stylesheet.

Mobile-first vs desktop-first

Mobile-first writes base styles for small screens and adds min-width queries upward; it is the modern default and keeps CSS lean. Desktop-first uses max-width queries downward, which suits retrofitting older desktop sites. Pick one per project and stay consistent.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Breakpoint Planner FAQs

Which breakpoints should I actually use?
Content should decide, not devices. Start with 640, 768, 1020 and 1280 as a baseline, then add or drop queries where your specific layout breaks. Fewer, meaningful breakpoints beat a long device list.
Should I design for specific phones?
No. Targeting iPhone or Pixel widths by name guarantees maintenance pain. Use ranges where the design needs them and let the layout flex between.
min-width or max-width, which is better?
min-width (mobile-first) is the industry default: simpler overrides, better performance on phones, and easier to reason about. Use max-width only when adapting an existing desktop design.
What about the 1536px 2xl preset?
It covers large desktop monitors and wide laptops. Only include it if your design genuinely changes at very wide viewports, like multi-column dashboards.
Do I need a breakpoint for 4K screens?
Rarely. Fluid max-width containers (like 1280px centered) handle huge screens gracefully without a dedicated query.
Advertisement