Responsive Viewport Tool
Find out which device class your content width falls into, with common breakpoints, to optimize your layout with targeted adjustments. GDPR-compliant.
Your inputs are processed in your browser and are not transmitted to our servers. Note: third-party resources (e.g. advertising and analytics from Google/Cloudflare) and an optional PayPal donation link may transfer data when loading or when clicked. Browser extensions or plugins may be able to read content that is visible in the input fields.
The result will appear here …
How to use this tool (video)
This video is hosted on YouTube. When you play it, data may be sent to Google.
Responsive Viewport Tool
The responsive viewport tool shows which device class your content or container width falls into. It uses Bootstrap and Tailwind breakpoints or your own values and generates matching media queries.
Which device class matches my width?
Enter the width of your container, for example 768 pixels. The tool assigns this width to a device class, such as phone, tablet or desktop, and names the matching breakpoint range.
Bootstrap and Tailwind breakpoints
Different frameworks use different breakpoints. Bootstrap 5 uses 576, 768, 992, 1200 and 1400 pixels, Tailwind uses 640, 768, 1024, 1280 and 1536 pixels. The tool provides both systems and highlights the matching step.
Use your own breakpoints
For custom systems you simply enter the breakpoints yourself. The tool generates a mobile-first media query and a target range query for your selected width.
Frequently asked questions
Which device class matches my width?
Enter the width of your container, for example 768 pixels. The tool assigns this width to a device class, such as phone, tablet or desktop, and names the matching breakpoint range.
Which breakpoints does Bootstrap use?
Bootstrap 5 uses the steps 576, 768, 992, 1200 and 1400 pixels. The tool provides this system and highlights the step that matches the width you entered.
Which breakpoints does Tailwind use?
Tailwind uses the steps 640, 768, 1024, 1280 and 1536 pixels. The tool also delivers the matching classification for your width here.
Can I enter my own breakpoints?
Yes. For custom systems you simply enter the breakpoints yourself. The tool generates the matching media query for the width you selected.
What is a mobile-first media query?
A mobile-first media query defines the base styles first and adds further styles from a specific breakpoint upwards. The tool creates this form as well as a target range query for your width.
Are my values transferred anywhere?
No. All calculations run entirely in your browser. Your values are not transmitted to our server or stored.