A specific screen width where your design adapts to a different layout, ensuring your site looks good on all devices from phones to large monitors. Strategic breakpoint choices prevent awkward in-between states where content becomes cramped or overly stretched. Framer's breakpoint system lets you customize layouts at each size while maintaining a single source of truth for your design.

CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.

A design approach that starts with the mobile experience and progressively enhances for larger screens. Mobile-first forces prioritization and ensures the smallest screens get the best experience, not a squeezed afterthought. This approach often results in cleaner, more focused designs at all screen sizes.

An approach that makes websites adapt fluidly to different screen sizes and devices through flexible grids, images, and CSS. Responsive design ensures optimal experiences whether viewing on phones, tablets, or desktop monitors. Framer's breakpoint system enables precise control over layouts at each screen size.

The visible area of a web page within the browser window, which varies by device and window size. Viewport dimensions determine breakpoint behavior and affect what's visible without scrolling. The viewport meta tag ensures proper scaling on mobile devices.

A CSS unit equal to 1% of the browser viewport height, enabling layouts relative to screen size. Vh units are useful for full-screen sections and height-based layouts. Be aware that vh can behave unexpectedly on mobile due to address bar behavior.

A CSS unit equal to 1% of the browser viewport width, enabling fluid sizing relative to screen width. Vw units are useful for responsive typography and full-width elements. Combine with max-width constraints for practical maximum sizes.

An image that adapts to different screen sizes and resolutions, serving appropriately sized versions for each context. Responsive images improve performance by avoiding unnecessarily large downloads on small screens. Framer handles responsive images automatically, serving optimized versions.

An HTML tag telling mobile browsers how to scale and size the page for their screens. The viewport meta tag is essential for mobile-responsive designs to display correctly. Framer automatically includes proper viewport settings.