What is responsive design?
Responsive design is a web design approach that automatically adjusts the layout for any screen size, from PC to smartphone to tablet. By using CSS @media queries to switch styles at each breakpoint, a single HTML file can serve multiple devices. Google has also moved to mobile-first indexing, so responsive design is essential from an SEO perspective.
Key breakpoints to check
The current standard breakpoints typically come in four tiers: smartphone (375px-480px), portrait tablet (768px), landscape tablet and small PC (1024px), and desktop (1280px and up). Frameworks such as Tailwind CSS and Bootstrap use breakpoints in this same range. Use this tool's three-up preview to spot any layout breakage.
Practical limitations
An iframe-based preview cannot fully reproduce the appearance on a real device. Touch events, scroll inertia, on-screen keyboards, and browser UI height changes (address bar show/hide) cannot be simulated. Sites that set X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' cannot be displayed inside an iframe. PWA features like Service Workers and push notifications also do not run in iframe previews.
Drawbacks and trade-offs
Changing the viewport size affects CSS media query breakpoints, but it does not change CSS environment variables (env(safe-area-inset-*), etc.) or device pixel ratio. As a result, validating iPhone notch handling or foldable device layouts requires a real device or a browser's device emulation (Chrome DevTools). Use this tool as a complement to real-device testing.
On-the-job Q&A
Q: I want to check my local development site. - You can enter a localhost URL. Note that mixed content warnings may appear when loading HTTP resources from an HTTPS page. Q: My layout breaks at a specific breakpoint. - Adjust the viewport width by 1px in this tool to inspect behavior near the CSS media query boundary. For container queries the size depends on the parent element, so changing the viewport alone may not reproduce the issue.
Trends in responsive design
The mobile-first thinking of the 2010s has evolved into "content-first" thinking in the 2020s. CSS Container Queries (supported in all major browsers as of 2023) enable responsive design based on container width rather than viewport. CSS Subgrid adoption makes nested complex grid layouts easier. With foldable devices like Galaxy Fold, "multi-posture" design and new media queries such as @media (horizontal-viewport-segments: 2) are also being standardized.